CSS グリッド プロパティを深くネストされた要素に適用するにはどうすればよいですか?

グリッド コンテキストとネストされた要素

CSS グリッドでは、グリッド プロパティは親子関係内の要素に制限されます。これにより、グリッド プロパティの適用範囲が、グリッド コンテナーの直接の子である要素に制限されます。

ネストされたグリッドの例

深くネストされたグリッドを配置しようとするシナリオを考えてみましょう。 li 要素は、グリッド コンテナーを表す最上位の u​​l に適用されるグリッド プロパティを使用します:

#orgChart ul.orgChartLevel1 {
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: 100px auto auto;
  grid-row-gap: 30px;
}

#orgChart li.orgChartLevel2b {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

この例では、 li.orgChartLevel2b 要素は ul.orgChartLevel1 の子孫ですが、直接の子ではありません。したがって、ul.orgChartLevel1 で定義されたグリッド プロパティは li.orgChartLevel2b には適用されません。

解決策: 親子関係を確立します

深くネストされたグリッド プロパティを適用するには要素を使用するには、スタイルを設定する要素とグリッド コンテナーの間に親子関係を確立する必要があります。これは、次のいずれかの方法で実行できます。

• グリッド コンテナと目的の要素の間の親要素に display: Grid または Display: inline-grid を適用します。
• 介在するラッパー要素を削除します。

グリッド内のグリッド コンテナに関する注意事項Items

グリッド項目自体がグリッド コンテナーになる可能性があることに注意することが重要です。このような場合、グリッド レイアウト プロパティは、グリッド コンテナーとして定義されているグリッド項目のスコープ内に適用されます。

以上がCSS グリッド プロパティを深くネストされた要素に適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。