CSS: CSS Gridコンテナ
最終更新：2026-10-13
CSS Gridは強力な2次元レイアウトシステムで、行と列を同時に制御できます。
1. Gridコンテナのプロパティ
(1) 早見表
| プロパティ | 値 | 用途 |
|---|---|---|
display: grid |
— | Gridコンテナを作成 |
grid-template-columns |
100px 1fr 2fr、repeat(3, 1fr) |
列の定義 |
grid-template-rows |
100px auto、repeat(3, 100px) |
行の定義 |
gap |
10px、10px 20px |
アイテム間のギャップ |
grid-template-areas |
"header header" "main aside" |
名前付きグリッドエリア |
2. fr単位
fr単位は残りのスペースを比例的に分配：
▶ サンプル
▶ 試してみよう3. repeat()
repeat()関数は繰り返しを削減：
▶ サンプル
▶ 試してみよう4. minmax() + auto-fill/auto-fit
列数を自動調整するレスポンシブグリッドを作成：
▶ サンプル
▶ 試してみようauto-fillとauto-fitの違い：
auto-fill: 収まる列をできるだけ作成（空でも）auto-fit: auto-fillと同じだが、空の列を折りたたむ
5. grid-template-areas
名前付きエリアでレイアウトを定義：
▶ サンプル
▶ 試してみよう❓ よくある質問
Q GridとFlexboxはどうやって選べばいいですか？
A 1次元（単一行または列）にはFlexboxを使用し、2次元（行と列を同時制御）にはGridを使用します。ほとんどのページは両方を使用します：ページ全体のスケルトンにGrid、ローカルの配置にFlexbox。1つのページで両方を使用するのは完全に正常です。
Q fr単位とパーセントの違いは何ですか？
A
frは残りのスペースを分配し、パーセントは合計幅を分配します。gapがある場合、frは比率を計算する前にgapを自動的に差し引きますが、パーセントはそうしません。1fr 1fr 1frとgapがあっても完璧な3分割ですが、33.33% 33.33% 33.33%はオーバーフローします。Q grid-template-areasの使い方は？
A 名前付きエリアでレイアウトを定義します：
grid-template-areas: "header header" "sidebar main" "footer footer";、その後grid-area: headerで子要素を割り当てます。レイアウトを変更するには、文字列テンプレートを調整するだけで、子要素を再配置する必要はありません。📖 まとめ
- Gridは強力な2次元レイアウトシステムです
grid-template-columnsとgrid-template-rowsでグリッド構造を定義fr単位で比例的なスペース分配repeat()、minmax()で柔軟なグリッドを作成gapで間隔を設定し、auto-fill/auto-fitとminmaxで真のレスポンシブグリッドを作成
📝 練習問題
基本
- 3×3のグリッドコンテナを作成し、各セル100px×100px、gap10pxにしてください。
1fr単位で「2カラム」レイアウト（左1fr、右3fr）を作成してください。
中級
repeat(auto-fill, minmax(150px, 1fr))で自動適応カードグリッドを作成し、ブラウザのサイズを変更して列の変化を確認してください。- 「古典的な3行2カラム」レイアウトを作成してください：ヘッダー（2列にまたがる）、左メニュー、右コンテンツ、フッター（2列にまたがる）。
チャレンジ
- レスポンシブ画像ギャラリーを作成してください：デスクトップ4列、タブレット2列、モバイル1列、
auto-fill+minmaxを使用。 grid-template-areasで完全なブログレイアウト（ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッター）を作成してください。
