要素をグリッドコンテナに変換し、子要素（グリッドアイテム）を2次元レイアウト（行と列）で配置できるプロパティです。複雑なレイアウトを直感的に実現でき、レスポンシブデザインにも最適です。
display: grid| grid | display: grid |
| inline-grid | display: inline-grid |
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}3列の等幅グリッドレイアウト。1frは利用可能な空間を等分
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}サイドバー付きの全画面レイアウト。固定幅サイドバーと可変メインエリア
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}レスポンシブグリッド。最小250pxで自動的に列数を調整
.card-grid {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 200px 1fr;
gap: 1rem;
}グリッドエリア名を使った直感的なレイアウト定義
2次元レイアウトならGrid、1次元ならFlexboxを選択。repeat()、minmax()、auto-fit/auto-fillでレスポンシブ対応が簡単。grid-template-areasで視覚的にレイアウトを定義できる。
grid-template-columnsを指定しないと1列になる。frとpxを混在させる際のサイズ計算に注意。grid-areaの名前にハイフンやアンダースコアを使うとエラーになる場合がある。
AIはgrid一発で組める場面でflexの入れ子を量産しがちです。カード一覧や2次元配置はgrid+gapの方が簡潔です。またgrid-template-areasによる視覚的なレイアウト定義をAIはあまり提案しないので、明示的に求めると保守しやすいコードになります。
このflexの入れ子で組まれたレイアウトを、gridで簡潔に書き直せるか検討して
ヘッダー・サイドバー・メイン・フッターの構成をgrid-template-areasで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。