親グリッドのトラック（行や列）を子グリッドで継承できる機能です。複雑なレイアウトの整列が簡単になります。
grid-template-columns: subgrid | grid-template-rows: subgrid| grid-cols-subgrid | grid-template-columns: subgrid |
| grid-rows-subgrid | grid-template-rows: subgrid |
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.child {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}子グリッドが親の列トラックを継承
.card-grid {
display: grid;
grid-template-rows: auto 1fr auto;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / -1;
}カードの高さを親グリッドの行に合わせて整列
カードレイアウトで高さを揃えるのに非常に便利。Flexboxでは難しい複雑な整列が可能。
AIは学習時期によって「subgridはFirefox限定」と古い情報を答えますが、Chrome 117（2023年9月）以降全ブラウザ対応済みです。またsubgridは行・列それぞれ個別に継承指定でき（grid-template-columns: subgridなど）、gapも親から継承されます（上書き可能）。「カード内の要素の高さを揃える」定番問題の最も正しい解です。
カード一覧で、各カードのタイトル・本文・ボタンの高さ位置を揃えたい。subgridで実装して
このネストしたgridの列ずれをsubgridで親のトラックに揃えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。