5. Gridシステム
CSS Gridは、2次元レイアウト（行と列）のための最強ツールです。
複雑な「聖杯レイアウト」も数行で実現。Flexboxと組み合わせれば、ほぼあらゆるレイアウトが可能になります。
🎮 Grid プレイグラウンド
16px
6
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
justify-items: stretch;
align-items: stretch;
gap: 16px;
}
grid-template-areas: 名前でエリアを配置
エリアに名前を付けて、視覚的にレイアウトを定義できます。これが「聖杯レイアウト」です。
📐 聖杯レイアウト
ヘッダー
サイドバー
メイン
フッター
.container {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr auto;
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; }📌 覚えておきたいポイント
display: gridを親要素に指定fr単位は「残りスペースの比率」を表すrepeat()で繰り返しを簡潔に書けるminmax()で最小・最大幅を指定auto-fit/auto-fillでレスポンシブなグリッドgrid-template-areasで視覚的にエリア配置