CSS グリッドは孫を直接配置できますか?またその方法は?

CSS グリッド: グリッド上に「孫」を配置できますか?

多くの CSS グリッド ガイドは、グリッドに配置された要素が配置される構造を暗示しています。グリッド要素の直接の子。ただし、「孫」要素をグリッド自体に直接配置する必要がある場合に発生する可能性があります。

「サブグリッド」の必要性

次のネスト シナリオ祖父母グリッド、親コンテナ、孫要素の場合、各孫をグリッド内の行に配置することができます。これはグリッド用語でも意味をなしますか?

「display: subgrid」と入力します

CSS Grid Level 2 のドラフト仕様から、display: subgrid の概念を導入します。グリッド アイテムに適用すると、display: subgrid を使用すると、アイテムのグリッド プロパティを無視しながら、アイテムの子がコンテナ グリッドのレイアウトを継承できるようになります。

この機能はまだブラウザーに広く実装されていません。ただし、これは「孫」位置決め問題に対する潜在的な解決策を提供します。

当面の代替案

表示: サブグリッドのサポートを待っている間に、代替アプローチが存在します。

• 表示を使用: グリッド項目上のグリッド (ただし制限あり)
• グリッド線を垂直方向に継承する表示: コンテンツを使用します。

追加リソース

• [CSS とは画面：サブグリッド?](https://developer.mozilla.org/en-US/docs/Glossary/display)
• [CSS グリッド レベル 2 のサブグリッド](https://blogs.igalia.com/mrego /2016/02/12/subgrids- Thinking-out-loud/)
• [表示: 位置合わせ用のサブグリッド孫コンテナ上のアイテム](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

以上がCSS グリッドは孫を直接配置できますか?またその方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。