Grid（格子状配置）
display: gridgrid-template-columnsgrid-template-rowsgrid-area
CSS Gridは行と列の2次元レイアウトシステムです。frユニット、repeat()、名前付きエリアを使って複雑なレイアウトを簡潔に記述できます。
デモ：grid-template-columns と fr ユニット
grid-template-columns: 1fr 1fr 1fr（均等3列）
1
2
3
4
5
6
grid-template-columns: 2fr 1fr 1fr（不均等）
1
2
3
4
5
6
grid-template-columns: 200px 1fr auto（混在）
200px固定
1fr（残り）
auto幅
デモ：grid-column / grid-row でセルを結合（span）
col: 1/3（2列結合）
row: 1/3
（2行結合）
（2行結合）
通常
通常
col: 1/4（3列フル幅）
デモ：grid-template-areas（名前付きエリア）
header
main
比較：auto-fill vs auto-fit（repeat + minmax）
repeat(auto-fill, minmax(120px, 1fr))：空の列を残す
Item 1
Item 2
Item 3
repeat(auto-fit, minmax(120px, 1fr))：アイテムが空白を埋める
Item 1
Item 2
Item 3
| 値 | auto-fill | auto-fit |
|---|---|---|
| 空のトラック | 残す（スペースが余る） | 折り畳む（アイテムが広がる） |
| 使いどころ | 列数を固定したい時 | アイテムを均等に広げたい時 |
NEWsubgrid（2023年〜 主要ブラウザ対応）
grid-template-columns: subgrid を使うと、子グリッドが親のグリッドトラックを継承できます。カードの中のテキストを親グリッドに揃えるのに非常に有用です。
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.child {
grid-column: span 3;
display: grid;
/* 親の列トラックを継承！ */
grid-template-columns: subgrid;
}masonry（実験的）: grid-template-rows: masonry はPinterestのような石積みレイアウトをCSSのみで実現できる実験的機能です（2024年時点でFirefox + フラグが必要）。
コード例
/* 基本的なグリッド */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 均等3列 */
grid-template-rows: auto;
gap: 16px;
}
/* 名前付きエリア */
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* アイテムの配置 */
.item {
grid-column: 1 / 3; /* 1列目から3列目の前まで */
grid-column: span 2; /* 2列分を占有 */
grid-row: 2 / 4;
}
/* レスポンシブグリッド */
.responsive {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}🤖 AIプロンプトテンプレート
CSS Gridを使ったレイアウト実装例をReact + Tailwind CSSで作成してください。 要件: - grid-template-columns / grid-template-rows / gap の基本デモ - frユニットとrepeat()・minmax()の組み合わせによるレスポンシブグリッド - grid-template-areasを使った名前付きエリアレイアウト（ヘッダー・サイドバー・メイン・フッター） - grid-column / grid-row によるセルの結合（spanの活用） - auto-fill vs auto-fit の違いをインタラクティブに確認できるデモ - subgridを使った子要素の親トラック継承の実装例
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。