CSS Gridチートシート

中級 | 10分 で読める | 2025.01.10

公式ドキュメント
CSSGridレイアウト

この記事の要点

• display: gridとgrid-template-columnsで2次元レイアウトを構築
• repeat(auto-fit, minmax(Npx, 1fr))でレスポンシブ対応
• 名前付きエリア（grid-template-areas）で直感的なレイアウト定義

基本構造

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

コンテナのプロパティ

grid-template-columns / rows

.grid {
  /* 固定幅 */
  grid-template-columns: 100px 200px 100px;

  /* 比率（fr単位） */
  grid-template-columns: 1fr 2fr 1fr;

  /* 混合 */
  grid-template-columns: 250px 1fr 1fr;

  /* repeat */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(4, 100px);

  /* auto-fill / auto-fit */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* 行 */
  grid-template-rows: 100px auto 100px;
}

gap（余白）

プロパティ説明
gap: 20px行と列
row-gap: 20px行のみ
column-gap: 10px列のみ
gap: 20px 10pxrow column

ポイント: fr単位は余白を比率で分配する単位。1fr 2fr 1frなら「1:2:1」の比率になります。pxやautoと混在も可能です。

grid-template-areas（名前付きエリア）

.grid {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

実践メモ: grid-template-areasを使うと、レイアウトがASCIIアートのように視覚的に把握でき、メンテナンス性が大幅に向上します。

justify-items / align-items

.grid {
  /* セル内の水平配置 */
  justify-items: start;   /* 左揃え */
  justify-items: end;     /* 右揃え */
  justify-items: center;  /* 中央 */
  justify-items: stretch; /* 伸縮（デフォルト） */

  /* セル内の垂直配置 */
  align-items: start;
  align-items: end;
  align-items: center;
  align-items: stretch;

  /* 両方まとめて */
  place-items: center;
  place-items: center start;  /* align justify */
}

justify-content / align-content

.grid {
  /* グリッド全体の水平配置 */
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;

  /* グリッド全体の垂直配置 */
  align-content: start;
  align-content: end;
  align-content: center;

  /* 両方まとめて */
  place-content: center;
}

grid-auto-flow

値説明
row行方向に配置（デフォルト）
column列方向に配置
row dense隙間を埋める

grid-auto-rows / columns

プロパティ説明
grid-auto-rows: 200px暗黙的な行の高さ
grid-auto-rows: minmax(100px, auto)最小・最大の高さ指定
grid-auto-columns: 1fr暗黙的な列の幅

注意: justify-items（セル内）とjustify-content（グリッド全体）は対象が異なります。混同しやすいので注意しましょう。

アイテムのプロパティ

grid-column / grid-row

.item {
  /* 開始位置 / 終了位置 */
  grid-column: 1 / 3;      /* 1列目から3列目まで（2列分） */
  grid-row: 1 / 2;

  /* span を使用 */
  grid-column: 1 / span 2; /* 1列目から2列分 */
  grid-column: span 2;     /* 2列分（位置は自動） */

  /* 個別指定 */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

grid-area

.item {
  /* 名前付きエリア */
  grid-area: header;

  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 2 / 3;
}

justify-self / align-self

.item {
  justify-self: start;   /* 水平方向の個別配置 */
  justify-self: end;
  justify-self: center;
  justify-self: stretch;

  align-self: start;     /* 垂直方向の個別配置 */
  align-self: end;
  align-self: center;
  align-self: stretch;

  /* 両方まとめて */
  place-self: center;
}

ポイント: grid-column: span NでN列分の幅を取れます。ダッシュボードやギャラリーで大きなカードを作るときに便利です。

よく使うパターン

基本グリッド

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

レスポンシブグリッド

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

聖杯レイアウト

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

ダッシュボード

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 20px;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-wide {
  grid-column: span 2;
}

ギャラリー

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
}

.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}

12カラムシステム

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }

カードリスト

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

中央揃え

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

注意: auto-fillとauto-fitは挙動が異なります。アイテムが少ないとき、auto-fillは空トラックを残し、auto-fitは空トラックを0に縮小します。

実践メモ: place-items: centerはCSS Grid最大のメリットの一つ。たった1行で完全中央揃えが実現できます。

auto-fill vs auto-fit

値説明
repeat(auto-fill, minmax(200px, 1fr))空のトラックも作成
repeat(auto-fit, minmax(200px, 1fr))空のトラックは0に縮小

参考リソース

関連記事

おすすめ記事

チートシート

CSS Flexboxチートシート

CSSFlexbox
最新情報

Tailwind CSS v5 (2026) - Oxide エンジン改良と CSS ファースト設定で進化するユーティリティフレームワーク

CSSTailwind CSS
最新情報

Tailwind CSS 4.0 2025 - Oxide Engineで5倍高速化

Tailwind CSSCSS
最新情報

Tailwind CSS v4がリリース - Rustベースの新エンジンで10倍高速化

Tailwind CSSCSS
チートシート

Tailwind CSSチートシート

TailwindCSS
実践講座

Tailwind CSS実践ガイド - ユーティリティファーストCSS

CSSTailwind

この技術を体系的に学びたいですか？

未来学では東証プライム上場企業のITエンジニアが24時間サポート。月額24,800円から、退会金0円のオンラインIT塾です。

メールで無料相談する
← 一覧に戻る