「display: subgrid」は CSS グリッド内で孫をどのように配置しますか?

サブグリッド機能: グリッド内に孫を配置

CSS グリッドでは、通常、要素はグリッド コンテナの直接の子です。ただし、「display: subgrid」プロパティの導入により、開発者はグリッドの孫である要素をグリッド自体に配置できるようになります。

Display: Subgrid とは何ですか?

display: subgrid プロパティは、グリッド項目内にサブグリッド コンテナを作成します。このサブグリッドは親のグリッド定義を継承し、サブグリッド内のグリッド項目を親グリッドのグリッド ラインに揃えることができます。

表示の使用: サブグリッド

grandhild 要素を親グリッドに配置し、親要素を「display: subgrid」に設定して、必要なグリッド プロパティを与えます。次に、孫要素がサブグリッド内のグリッド項目になるように設定します。

例:

<div class="wrapper">
  <div class="parent-grid">

この例では、「parent-grid」要素が「display:」に設定されています。 subgrid」には 2 つの列があります。 「child-grid」要素は親グリッド内のサブグリッドであり、2 つの行があります。 「孫要素」は子グリッド内のグリッド項目です。

その結果、要素 A、B、C はそれぞれ親グリッド内の独自の行を占有します。

ブラウザのサポート

ディスプレイ: サブグリッドはまだ CSS グリッド仕様で提案されている機能であり、まだ広く普及していません。主要なブラウザでサポートされています。 Firefox Nightly および Microsoft Edge (フラグ付き) で利用できます。

以上が「display: subgrid」は CSS グリッド内で孫をどのように配置しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。