CSS Gridチートシート

中級 | 10分 で読める | 2025.01.10

公式ドキュメント
CSS

このチートシートで確認できること

CSS Grid は、行と列を使って2方向のレイアウトを作るためのCSS機能です。このページでは、グリッドの基本構造、コンテナ側のプロパティ、アイテム側の配置、よく使うレイアウトパターンを確認できます。

最初に覚えるのは、display: grid、grid-template-columns、gap、repeat()、minmax()、grid-column です。1方向に並べるなら Flexbox、行と列を同時に扱うなら Grid と考えると選びやすくなります。

基本構造

<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 Grid は、カード一覧、ダッシュボード、ページ全体の骨組みなど、2方向のレイアウトに向いています。まずは repeat(auto-fit, minmax(...))、gap、grid-template-areas を使えるようにしてください。

中央揃えだけなら place-items: center、1方向の並びなら Flexbox と使い分けると、CSSが複雑になりにくくなります。

参考リソース

関連記事

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR