年以上経過しているため、内容が古い可能性があります。サポートされます12。月中旬以降になるでしょう3。ついて、実例を取り上げながら特徴や使い方を説明します。2」に属しており、基本的な特徴としては以下が挙げられます。grid-template-columns)親グリッドで指定した余白(gap)は上書きできる以下にコードを抜粋します。実例のなかでも一部言及しますが、サブグリッドの注意点としては以下が考えられます。構造に対する依存度は高くなる一足飛びに先祖要素のサブグリッドを定義することはできないこれらを踏まえたうえで、サブグリッドの実例を見ていきましょう。カードコンポーネント」まず、サブグリッドの使用例として一般的な、カードコンポーネントの例を挙げます。高さを調整するしか方法がありませんでした。使用する方法では以下のような問題点や複雑性があります。使用せずに高さ揃えが実現できます。以下はライブデモです。対応している環境でご確認ください。amet.Linkこのように、たとえ行を折り返したとしても親グリッドのトラックにより、コンポーネント内の要素の高さ揃えは維持されたままになります。番目のカードコンポーネントは、あえて見出し下のテキストが抜けた状態にしています。関連するコードを抜粋します。指定することで、親グリッドの行方向のトラックをサブグリッドとして使用できます。行分のトラックを使用することを明示しています。暗黙的なグリッドは生成されない見出し「暗黙的なグリッドは生成されない」ここで注意する点としては、通常のグリッドレイアウトとは異なり、サブグリッドのトラックは暗黙的に生成されないということです。行分のトラックを明示しましたが、この指定がなかったり、要素数に対して指定するトラック数が不足していると、以下のように要素が重なってしまうため注意が必要です。構造の制約」さらに注意する点としては、直接の子要素でないとサブグリッドとして定義できないので、カード全体を囲う要素と、カードコンポーネント自体の間に要素が入るとサブグリッドは適用されません。親要素」のサブグリッドとして定義することはできません。子要素」をあわせてサブグリッドに定義することで解消できますが、カードコンポーネントの例では行トラックの生成がうまくいきません。指定するのが近道ですが、この方法にも気をつける点があるので、それらを踏まえたうえで検討する必要があります。後述するポジショニングマップの例では、中間要素をサブグリッドとして定義して対応しています。構造を維持したまま、その下の要素(孫要素)をサブグリッドとして定義することができます。指定した要素にはボックスが生成されないため、余白や背景を指定できないので、活用できる場面は限定されます。アクセシビリティに関するブラウザ上のバグが存在しており、その多くは修正されましたが、いくつかのバグは残ったままです。指定する分には問題なさそうですが、念のため留意しておいたほうがよいでしょう。次に、リストの行頭揃えの例を見ていきます。さきほどのカードコンポーネントでは行トラックをそろえましたが、今度は列トラックをそろえます。列のトラックを持つ親グリッドに対して、サブグリッドを定義する以下はライブデモです。指定し、列方向のグリッドトラックをサブグリッドとして使用しています。関数を使用して生成しており、意図的に桁数を変えていますが、この桁数の変化によって幅が異なる場合でもサブグリッドによってラインをそろえることができます。*/</style>このように、サブグリッドで列トラックをそろえる応用例として、以下のようなニュース一覧のレイアウトも考えられそうです。最後に、行、列の両軸をサブグリッドに定義する例として、ポジショニングマップを実装します。以下はライブデモです。SHOCKFROGGYLIONこの例では、親グリッドとグリッドに配置したいアイテムとの間に中間要素が存在します。指定し、行・列ともにサブグリッドを定義しています。指定で、コンテナクエリの単位(cqi)を使用しています。基本的な使い方を説明しました。サブグリッドについては、なんとなく概念を理解しているつもりでしたが、実際にコードを書いてみるとうまくいかない場面があり、やはり手を動かすことは重要だと改めて実感しました。今後、使っていくうちに、より有用な使い方や新たな課題が見つかるかもしれませんので、引き続き実践をとおして、サブグリッドの使い方を考えていきます。作成にあたり、以下のウェブページを参考にしました。