CSS Gridレイアウト入門

「ボックスを縦横にきれいに並べたい」「カードをスマホでは2列、PCでは4列にしたい」――そんなときの最強ツールがCSS Gridです。

Flexboxが“1次元（横か縦のどちらか）”の並びに強いのに対して、Gridは2次元（行×列）で面を扱えるのが最大の特徴。

この記事では、初心者が最短で使いこなせるように、用語 → 最小コード → 便利テク → つまずきポイントの順で丁寧に解説します。

ときどき図解も入れているので、見ながら手を動かしてみてください。

1. まずは言葉の整理

グリッドコンテナ：display: grid;を指定した親要素のこと
グリッドアイテム：その直下の子要素たち
トラック：列（column）や行（row）1本分のこと
ギャップ：トラック間のすき間（gap）
トラックサイズ：列幅・行高（grid-template-columns / rows で指定）

図で見るとこう👇

2. 最小の基本形（3列カード）

HTML：

<ul class="grid">
  <li>Card 1</li>
  <li>Card 2</li>
  <li>Card 3</li>
  <li>Card 4</li>
  <li>Card 5</li>
  <li>Card 6</li>
</ul>

CSS：

.grid {
  display: grid;                           /* Grid を有効化 */
  grid-template-columns: repeat(3, 1fr);   /* 1fr×3列 = 等幅3列 */
  gap: 16px;                               /* すき間 */
}
.grid > li {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 8px;
}
.ul {
   list-style: none;
}

こんな感じになる（下の図は色変えています）

3. スマホ〜PCで“勝手に”気持ちよく折り返す

レスポンシブで最も使うのが minmax() と auto-fit / auto-fill の組み合わせ。

.grid {
  display: grid;
  /* 200px 以上を確保しつつ、余白は均等に伸びるカード列 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

minmax(200px, 1fr)：各カードは最低200px、空きがあれば1frで伸びる
auto-fit：置けるだけ詰める（空のトラックは畳んで、残りが広がる）

auto-fit と auto-fill の違い（図解？）

親幅が広いときに空き枠をどう扱う？

auto-fit : [Card][Card][Card]＿＿ → 空き枠を畳む → 既存カードが伸びる

auto-fill: [Card][Card][Card][    ] → 空き枠を“席だけ確保” → 伸びにくい

初心者はまず auto-fit を覚えればOKです。

4. アイテム単位での細かな制御

4-1. マス目をまたぐ（合体する）

/* 1〜3列目まで横断、1〜2行目まで縦断 */
.item--wide {
  grid-column: 1 / 4; /* 1列目から4列目の手前まで */
  grid-row: 1 / 3;    /* 1行目から3行目の手前まで */
}

4-2. 行高をそろえる

カード高さを自然にそろえたいときは、grid-auto-rows に最小値を指定

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  grid-auto-rows: minmax(140px, auto);
}

5. 位置合わせ（align / justify 系）

Grid は横（inline）と縦（block）で考えます。

justify-* … 横方向
align-* … 縦方向

よく使う組み合わせ

/* コンテナ全体の中で“アイテムの並び”をどう配置するか */
.grid {
  justify-content: center;  /* 横方向に中央寄せ（余白が左右にできる） */
  align-content: start;     /* 縦は上寄せ */
}

/* 各アイテムの“セル内での位置” */
.grid {
  justify-items: stretch;   /* 横いっぱい（初期値が stretch） */
  align-items: start;       /* 上寄せ */
}

/* まとめて書くショートハンド */
.grid {
  place-content: start center; /* 縦/横 の順 */
  place-items: start stretch;
}

6. 実用スニペット集

6-1. “グリッド間隔だけ”変えたい（列と行で別値）

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 12px;
}

6-2. 2カラム本文（サイドバー固定）

.article {
  display: grid;
  gap: 24px;
  grid-template-columns: 280px minmax(0, 1fr);
}

minmax(0, 1fr) としておくと、長い単語やコードで横スクロールが出にくく、レイアウト崩れを防げます。

6-3. ギャラリー（最少幅カードで自動折り返し）

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

6-4. “聖杯レイアウト”の簡易版（ヘッダー/メイン/サイド/フッター）

.page {
  display: grid;
  grid-template:
    "header header" auto
    "main   aside"  1fr
    "footer footer" auto
    / 1fr 320px;
  min-height: 100dvh; /* 画面高を占有 */
  gap: 16px;
}
.page > header { grid-area: header; }
.page > main   { grid-area: main;   }
.page > aside  { grid-area: aside;  }
.page > footer { grid-area: footer; }

@media (max-width: 900px) {
  .page { 
    grid-template:
      "header" auto
      "main"   auto
      "aside"  auto
      "footer" auto
      / 1fr;
  }
}

7. つまずきやすいポイントと回避策

margin じゃなくて gap を使う
余白は gap が正解。子アイテムの最外側の余白や上下の相殺問題を気にせず、行・列の間隔だけを均一にできます。
幅がはみ出す（横スクロール）
grid-template-columns: 1fr 1fr; でも、子要素の中身が長いとあふれます。
→ コンテンツ側に min-width: 0; を指定すると折り返しが効くようになります。

.grid > * { min-width: 0; }

auto-fit / auto-fill の挙動違い
カードが伸びないときは auto-fit に。空席を畳むかどうかの違いを思い出す。
画像の高さがバラバラ
見た目をそろえるなら、画像を object-fit: cover; + 固定アスペクト比コンテナに。

.card-thumb {
  aspect-ratio: 4 / 3;  /* 比率固定 */
  overflow: hidden;
}
.card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

Flex と Grid の使い分け

横一列に並べて均等配置や中央寄せなら Flex が直感的
行×列で位置指定したい、紙面レイアウトは Grid が速い
→ “カードの並び”は Grid、“カード内のボタン整列”は Flex のように併用が王道。

8. コピペして使ってね

HTML：

<section class="demo">
  <article class="card">1</article>
  <article class="card featured">2 (featured)</article>
  <article class="card">3</article>
  <article class="card">4</article>
  <article class="card">5</article>
  <article class="card">6</article>
</section>

CSS：

* { box-sizing: border-box; }
.demo {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.card {
  background: #f5f7fb;
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  padding: 20px;
  font: 600 16px/1.2 system-ui, sans-serif;
  display: grid;
  place-items: center; /* 中央寄せのショートハンド */
  min-width: 0;       /* はみ出し対策 */
}
.featured {
  grid-column: span 2; /* 横に2マス */
  grid-row: span 2;    /* 縦に2マス */
  background: #eef5ff;
  border-color: #cfe1ff;
}
@media (max-width: 520px) {
  .featured { 
    grid-column: auto; /* 狭い画面では通常サイズに戻す */
    grid-row: auto;
  }
}

画面を縮めていくと↓

さらに縮めるとこうなる↓

※もうちょっとカラフルな色使えばよかったと後悔。

9. 仕上げのチートシート

`display: grid;`	Grid開始
`grid-template-columns: repeat(3, 1fr);`	等幅3列
`gap: 16px;`	行列のすき間
`repeat(auto-fit, minmax(○px, 1fr))`	自動段組みの定番
`grid-template-areas`	紙面レイアウトを名前で指定
`grid-column / grid-row`	マス目をまたぐ
`justify-* / align-* / place-*`	位置合わせ
`min-width: 0;`	はみ出し防止の保険

10. さいごに：学ぶ順番は“3手”

display: grid + grid-template-columns + gap
repeat(auto-fit, minmax()) でレスポンシブ段組み
grid-template-areas でページ骨組み

この3つを押さえるだけで、実務の8割はもう怖くないと思う。

必要になったら grid-column / row や place-* を足していきましょう。

自分的余談

普段口頭で説明してても感じなかったんだけど、文章でCSS説明するのって難しいね。目の前でやってるとこ見せるわけじゃないし。映像とか交えた方がいいですかね？重くなる？いや、ほんとに難しい。本書いてる人すごいよね。また解決策見つけた差し替えますm(__)m

自分が読んできて、一番初心者さんのためになると思った一冊

【改訂新版】書きながら覚えるHTML＆CSS入門ワークブック [ 松竹えり ]

created by Rinker

¥2,970 (2025/08/31 16:59:49時点楽天市場調べ-詳細)