CSS Gridチートシート

CSS Gridは、カード一覧やページ全体の骨組みを組むときのいちばんの近道——なのに1frやrepeat(auto-fit, minmax(...))の書き方が毎回思い出せませんよね。この記事は、Gridのよく使うプロパティを動くデモつきで引ける早見表です。

全体マップ

Gridのプロパティも、Flexboxと同じく「親（コンテナ）につけるもの」と「子（アイテム）につけるもの」の2種類です。

実務で使うのは、grid-template-columns と gap の2つで8割です。まずここだけ押さえれば動き出せます。

grid-template-columns——列の設計図

Gridの主役です。「列をいくつ、どんな幅で作るか」を空白区切りで書きます。ボタンを押して、値の効き方を見比べてください。

書いた列の数だけマスが横に並び、足りなくなると自動で次の行へ進みます。だから「6個の箱を2列で」と書けば、勝手に3行になります。行数を数える必要はありません。

frという単位

frはfraction（割合）の略で、「余っている場所を分け合う単位」です。pxのような決まった長さではありません。

「固定したい列はpx、伸ばしたい列はfr」——これがGridでのいちばん多い書き方です。サイドバーとメインの2カラムなら 240px 1fr で完成します。

repeat()——同じ指定のくり返しを短く

1fr 1fr 1fr 1frのような繰り返しは、repeat()でまとめられます。

.grid {
  grid-template-columns: repeat(3, 1fr);        /* 1fr を3回 = 3列均等 */
  grid-template-columns: repeat(2, 100px 1fr);  /* 100px 1fr を2回 = 4列 */
}

第1引数が回数、第2引数がくり返す内容です。列が増えても1か所直すだけで済みます。

メディアクエリなしでレスポンシブにする

Gridでいちばん覚えて得をするのがこれです。画面幅に応じて列数が自動で変わる書き方があります。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

読み方はこうです。

• minmax(240px, 1fr)——1枚の幅は「最低240px、最大は余りを分け合う」
• auto-fit——その条件で入るだけ並べる。入らなくなったら折り返す

つまり「240pxを下回るなら列を減らす」という判断を、ブラウザが勝手にやってくれます。カード一覧はこれ1行でスマホ対応が終わります。下のデモで、枠の幅を動かして確かめてみてください。

gap——マスどうしのすき間

.grid {
  gap: 16px;         /* 縦横とも16px */
  gap: 24px 16px;    /* 行間24px・列間16px */
}

marginで1つずつ空けるのと違い、外側に余計な余白が出ません。Gridを使うなら余白はgapに任せるのが定石です。

grid-template-rows——行の高さ

列と同じ書き方で、行の高さも決められます。書かなければ中身の高さに合わせて自動です。

.layout {
  grid-template-rows: 80px 1fr 60px;   /* ヘッダー・本文・フッター */
  min-height: 100vh;
}

1frを真ん中に置くと、「内容が少なくてもフッターが下に張りつく」レイアウトになります。

子につけるプロパティ

grid-column / grid-row——マスをまたいで広げる

「この1枚だけ2列ぶん使いたい」ときに使います。spanが分かりやすい書き方です。

.wide {
  grid-column: span 2;    /* 横に2マスぶん */
}
.tall {
  grid-row: span 2;       /* 縦に2マスぶん */
}

線の番号で指定することもできます。grid-column: 1 / 3 は「1本目の線から3本目の線まで」＝2マスぶんです。マスではなく線を数えるのがGridの考え方で、ここが最初につまずくポイントです。

.hero {
  grid-column: 1 / -1;    /* 1本目から最後の線まで＝全幅 */
}

-1は「いちばん右の線」を指す便利な書き方で、列数が変わっても全幅のままでいてくれます。

justify-self / align-self——自分だけ寄せを変える

マスの中での位置を、その子だけ上書きします。

.item {
  justify-self: center;   /* マスの中で横中央 */
  align-self: end;        /* マスの中で下ぞろえ */
}

grid-template-areas——名前で配置する

ページ全体の骨組みを作るときは、マスに名前をつけて絵のように書く方法が読みやすいです。

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  gap: 16px;
}
.layout > header { grid-area: header; }
.layout > aside  { grid-area: side; }
.layout > main   { grid-area: main; }
.layout > footer { grid-area: footer; }

CSSを見ただけでレイアウトの形が分かるのが強みです。スマホ用に並びを変えたいときは、メディアクエリの中でgrid-template-areasを書き直すだけで済みます。

そのまま使えるレシピ5つ

レスポンシブなカード一覧

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

サイドバー＋本文の2カラム

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

写真を正方形でそろえるギャラリー

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;     /* 正方形に */
  object-fit: cover;       /* はみ出しは切り取る */
}

1枚だけ大きく見せる

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.cards .featured {
  grid-column: 1 / -1;     /* 横幅いっぱい */
}

ど真ん中に置く

.center {
  display: grid;
  place-items: center;      /* justify-items と align-items をまとめた書き方 */
  min-height: 100vh;
}

place-items: centerは1行で上下左右の中央になる最短の書き方です。Flexboxで2行書いていたところが1行で済みます。

FlexboxとGrid、どっちを使う？

ざっくり「1方向に並べるならFlexbox、マス目にするならGrid」。迷ったら、列をそろえたいかどうかで決めてください。Flexboxは折り返した行の列がそろいませんが、Gridは必ずそろいます。

Gridが効かないときのチェックリスト

• 並ばない → display: gridは並べたい子の親に書きます
• gapが効かない → gapも親に書くプロパティです
• マスに入らない子がいる → マス目に入るのはdisplay: gridを書いた要素の直接の子だけ。余分なdivで包んでいませんか？
• 列がはみ出す → %やpxで合計を100%にしていませんか？frに変えるとgapぶんを自動で引いてくれます
• align-itemsが効かない → 行の高さが中身ぴったりだと寄せる余地がありません。grid-template-rowsかmin-heightを確認
• 画像が枠を突き破る → 画像にmax-width: 100%（またはwidth: 100%）を付けます。Gridのマスは中身の最小幅より縮まないので、大きな画像が列幅を押し広げます

まとめ

1. まず覚えるのはgrid-template-columnsとgapの2つ——これで8割こなせる
2. frは「余りを分け合う単位」。gapと足してもはみ出さないのが%との違い
3. repeat(auto-fit, minmax(240px, 1fr))で、メディアクエリなしのカード一覧が完成する
4. 全幅にしたい子はgrid-column: 1 / -1。線を数えるのがGridの考え方
5. 1方向はFlexbox、マス目をそろえたいならGrid

列をそろえる作業は、Gridに任せてしまうのがいちばん速いです。カード一覧で1回書いてしまえば、次からは指が覚えています。