Flexbox が「並べるのが得意」なレイアウトなら、
CSS Grid は「配置を自由にデザインできる最強レイアウト」 です。
- 2列・3列のレイアウト
- カードの整列
- 複雑なWebサイトのトップページ
- ダッシュボードUI
- 雑誌風レイアウト
こういった構造を、CSS Gridなら 数行のコードで実現できます。
この記事では、初心者がつまずかず理解できるように丁寧に解説していきます。
CSS Grid の基本（display: grid）
まずは 親要素 に grid を指定します。
.grid {
display: grid;
}次に 列の幅（column）と行の高さ（row） を決めます。
① 列を作る（grid-template-columns）
.grid {
display: grid;
grid-template-columns: 200px 200px 200px;
}→ 200px幅の列が3つ並ぶ
② ％ や frを使う（fr は Grid 特有の便利単位）
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}→ 画面幅に応じて「均等3列」になる
→ Flexbox よりも直感的にレイアウトできる
③ gap で間隔を空ける
.grid {
display: grid;
gap: 20px;
}→ Flexbox と同じく、実務では gap が大活躍。
④行の高さを指定（grid-template-rows）
.grid {
display: grid;
grid-template-rows: 100px 100px;
}⑤ 特定の要素だけ幅を広げる（grid-column / grid-row）
.item1 {
grid-column: 1 / 3; /* 1列目から2列目ぶんを横断 */
}
→ 複雑な“カードの強調表示”などに重宝。
実例①：3列カードレイアウト（最もよく使う）
HTML：
<div class="grid cards">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
<div class="card">E</div>
<div class="card">F</div>
</div>CSS：
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
}→ ブログのカードデザイン、商品一覧などにそのまま使える！
実際の画像：
実例②：2カラムレイアウト（左広め・右細め）
.layout {
display: grid;
grid-template-columns: 3fr 1fr; /* メイン3：サイド1 */
gap: 20px;
}→ Flexboxよりシンプルで直感的。
実際の画像：
今回は分かりやすいように外枠戦を追加しています。
実例③：特定の要素だけ横長にする
.item-large {
grid-column: 1 / 4; /* 1列目〜3列目まで横断 */
}→ ニュース記事の特集枠などに使える。
実際の画像：
実例④：写真ギャラリー風レイアウト
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}ポイント：
- 画面幅に合わせて自動的に列数が増減
- フォトギャラリーに最適
実際の画像：
レスポンシブ対応（スマホは1列、PCは複数列）
最もよく使われる書き方はこちら👇
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* スマホ（600px以下） */
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr; /* 1列レイアウト */
}
}→ 自動で「スマホ＝縦並び」「PC＝横並び」が実現できる。
レスポンシブ対応：
パソコンとスマホでは画面サイズが違うので表示のされ方も変わります。
なので、パソコン用だけ、スマホ用だけ。ではなく双方できちんとして表示がされるようにレイアウトやデザインを整えることです。
「@media(max-width: 表示する画面サイズ)」というように記載するとそれ以降が、その画面に対する設定になります。
Flexbox と Grid の違い（初心者が理解しやすいように）
| 比較項目 | Flexbox | Grid |
|---|---|---|
| 得意なこと | 並べる（1次元） | 配置する（2次元） |
| 構造 | 横方向 or 縦方向 | 行・列の両方を同時に扱う |
| 適した用途 | メニュー/ボタン/簡単な整列 | トップページ/商品一覧/複雑レイアウト |
| 操作性 | 流れに沿って並ぶ | 最初に“枠”を作る |
結論
- Flexbox → 並べ方に強い
- Grid → 複雑なレイアウトに最強
両方使い分けられると、一気にデザインの幅が広がります。
この記事のまとめ
- Gridは複雑なレイアウトを“簡単に”作れる
- 列（columns）と行（rows）を直感的に操作できる
- fr を使えばスマホ対応も簡単
- 特定要素だけの拡張（grid-column）が便利
- Flexboxと合わせると最強のレイアウト構築ができる
次回は、ここまで学んだHTML/CSSをまとめて
⑫：1ページのWebサイトを作る実践編 に進みます。
ではでは！次回！：HTML/CSS入門⑫ 1ページサイトを作ってみよう！
コメント