Grid
初級読み方：グリッド｜英語：Grid
行と列で要素を配置するレイアウト方法で、Flexboxより複雑なレイアウトに向くよ。
やさしい説明
Grid（グリッド）とは、要素を格子状（行と列）に配置するCSSレイアウト方法です。
Excel（表計算ソフト）のセルをイメージしてください。行と列を定義して、要素を好きなセルに配置できます。複数のセルをまたぐこともできます。
Flexboxが「1列に並べる」のに対し、Gridは「行と列の2次元で配置する」のが得意です。ページ全体のレイアウト（ヘッダー、サイドバー、メイン、フッター）を作るのに最適です。
図解：Gridレイアウト
具体例・使い方
/* 3列均等のグリッド */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* repeat(3, 1fr) でも同じ */
gap: 20px;
}
/* レスポンシブ: 画面幅に応じて列数が自動調整 */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}ページ全体のレイアウトを作る
/* ヘッダー・サイドバー・メイン・フッターの典型レイアウト */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }grid-template-areas を使うと、レイアウトを文字で視覚的に表現できます。コードを見ただけでページ構造が一目でわかるのが大きなメリットです。
いつ使う？
- 写真ギャラリーやカード一覧（均等グリッド）
- ページ全体のレイアウト（ヘッダー＋サイドバー＋メイン＋フッター）
- 要素を特定の位置に固定したいとき
- 複数のセルをまたぐ（span）デザインが必要なとき
間違いやすいポイント
❌ FlexboxとGridの使い分けがわからない
1方向に並べるだけなら Flexbox、行と列の2次元配置なら Grid が適しています。「ナビメニューの横並び → Flex」「カード一覧の格子配置 → Grid」と覚えると判断しやすいです。両者を組み合わせるのが現代のCSSの標準的な使い方です。
❌ gapの代わりにmarginを使う
Grid/Flexboxでは gap プロパティで要素間の隙間を指定できます。margin を使うと端の要素にも余白がついてしまいますが、gap なら要素間のみに隙間が入り、管理が簡単です。
よくある疑問
Q: Gridはいつ使う？
A: カードの一覧表示、ダッシュボード、複雑なレイアウトなど、2次元の配置が必要なときに使います。1方向だけならFlexboxの方がシンプルです。
Q: fr単位とは？
A: fraction（分数）の略で、余ったスペースを比率で分配します。grid-template-columns: 1fr 2fr; で1:2の比率になります。
Q: repeat()とは？
A: 同じ値の繰り返しを省略する関数です。grid-template-columns: repeat(3, 1fr); は 1fr 1fr 1fr と同じ意味です。
関連用語
📖 関連レッスン
レッスンを見る →