CSS グリッド コンテナ内に孫を配置するにはどうすればよいですか?

グリッド コンテナの孫

CSS グリッド ガイドは、グリッド内に配置された要素がグリッド要素の直接の子であることを示唆しています。しかし、グリッドの「孫」である要素を配置したい場合はどうすればよいでしょうか?

display: subgrid

CSS Grid Level 2 ドラフト仕様では、次のような仕様が導入されています。サブグリッドの概念。 display: subgrid を使用すると、グリッド項目は行と列の定義を親グリッド コンテナーに延期できます。これにより、両方のグリッドの内容を揃えることができます。

ただし、この機能は主要なブラウザにはまだ実装されていません。

その他のオプション

グリッド レベル 1 では、コンテナーのインフローの子のみがグリッド アイテムになります。グリッド アイテムの display: subgrid を使用すると、アイテムの子はコンテナの行を尊重します。

あるいは、グリッド アイテム (ネストされたグリッド コンテナ) で display: Grid を使用するか、display: content の回避策を検討することもできます。 「CSSの代替となるものは何か」で説明されています。サブグリッド?"

リソース

• [サブグリッド](https://blogs.igalia.com/mrego/2016/02/12/subgrids) - Thinking-out-loud/)
• [Mozilla Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

以上がCSS グリッド コンテナ内に孫を配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。