孫を CSS グリッド コンテナ上に直接配置できますか?

グリッド コンテナ上に孫を直接配置できますか?

CSS グリッド レイアウトの概念は通常、グリッド上に配置されるグリッド要素の直接の子を中心に展開します。しかし、グリッド構造内に孫を配置したい場合はどうすればよいでしょうか?これは論理的に意味がありますか?

「display: subgrid」について

CSS グリッド レベル 2 では、「display: subgrid」プロパティが導入され、グリッド コンテナーの影響をネストされた要素に拡張できるようになります。このプロパティ:

• 要素内にサブグリッドを作成し、特別なタイプのグリッド コンテナにします。
• 親グリッドからグリッド トラックを継承します。
• 子を許可します親のサイズ変更に参加するサブグリッドのGrid.

実装状況

残念ながら、display:subgridはまだ主要なブラウザには実装されていません。この制限のため、このプロパティを使用してグリッド コンテナ上に孫を効果的に配置することはできません。

CSS グリッド構造の制限

CSS グリッド内では、コンテナの直接の子のみがグリッド アイテムになり、グリッドのプロパティを利用します。これは、孫をネストするか、別の方法を使用して配置する必要があることを意味します。

考えられる回避策

表示: グリッド項目のグリッド

表示の確立:グリッド項目上のグリッドは、いくつかの制限された機能を実現できますが、このアプローチは表示と完全に類似しているわけではありません。 subgrid.

Display:contents

もう 1 つの潜在的な回避策には、親のグリッド レイアウトを継承できる display:contents を利用することが含まれます。この手法については、

• [CSS サブグリッドの代替となるものは何ですか?](https://stackoverflow.com/questions/42374779/what-is-an-alternative-to) などのリソースで詳しく説明されています。 -css-subgrid)

追加情報

詳細このトピックについて詳しくは、次のリソースを参照してください:

• [サブグリッドの説明](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 サイトの他の関連記事を参照してください。