CSS Gridとは（Flexboxとの使い分け）
CSS Grid Layout（以下CSS Grid）は、Webページのレイアウトを行と列の2次元で制御できるCSSモジュールだ。2017年に主要ブラウザが一斉対応し、2026年現在では全モダンブラウザが完全サポートしている。
CSS Grid以前は、floatやinline-blockを駆使した回避策が当たり前だった。その後Flexboxが普及して横並びレイアウトは格段に楽になったが、複雑な2次元レイアウトには限界があった。CSS Gridはその問題を根本から解決する。
FlexboxとCSS Gridの使い分け
Flexboxを使うかCSS Gridを使うかの判断軸は「コンテンツが主役かレイアウトが主役か」だ。
| 特徴 | Flexbox | CSS Grid |
|---|---|---|
| 次元 | 1次元（行 または 列） | 2次元（行 と 列を同時に制御） |
| 得意なこと | ナビゲーション、ボタン群、カードの横並び | ページ全体レイアウト、複雑なグリッド、非均一配置 |
| 主役 | コンテンツ（コンテンツサイズに応じてフレキシブル） | レイアウト（先にグリッドを定義してアイテムを配置） |
| アイテムの制御 | 主軸方向のみ細かく制御 | 行・列の両方向を正確に制御 |
Point
FlexboxとCSS Gridは競合ではなく補完関係だ。ページ全体の骨格はCSS Gridで組み、カード内部のコンテンツ配置はFlexboxで整える——両方を組み合わせるのがモダンなアプローチになる。
基本用語を理解する
CSS Gridを使いこなすには、専用の用語を最初に押さえておくのが近道だ。以下の6つの概念がコアになる。
-
Grid Container（グリッドコンテナー）
display: gridまたはdisplay: inline-gridを指定した要素がグリッドコンテナーになる。直接の子要素が自動的にグリッドレイアウトの対象になる。 -
Grid Item（グリッドアイテム）
グリッドコンテナーの直接の子要素。孫要素以下は通常のフローに従う。
grid-columnやgrid-rowを指定すれば、配置先のセルを明示的に指定できる。 -
Grid Line（グリッドライン）
グリッドを構成する水平・垂直の仮想的な線。列（column）方向のラインは左から1, 2, 3…、行（row）方向は上から1, 2, 3…と番号が振られる。マイナス番号で末尾から数えることも可能（-1が末尾）。
-
Grid Track（グリッドトラック）
2本の隣接するグリッドライン間のスペース。列トラック（column track）と行トラック（row track）があり、それぞれ
grid-template-columnsとgrid-template-rowsで幅・高さを定義する。 -
Grid Cell（グリッドセル）
行トラックと列トラックが交差してできる最小単位のスペース。表のセルに相当する。デフォルトではグリッドアイテムが1セルずつ順番に配置される。
-
Grid Area（グリッドエリア）
1つ以上のグリッドセルで構成される矩形の領域。
grid-areaプロパティで名前を付け、grid-template-areasで配置を視覚的に定義できる。複雑なレイアウトを直感的に書ける強力な機能だ。
コンテナーのプロパティ
グリッドコンテナーに指定するプロパティでレイアウトの骨格を組む。まず押さえるべき5つのプロパティをまとめた。
display: grid
グリッドレイアウトの起点となる宣言だ。これを指定した要素がグリッドコンテナーになる。
grid-template-columns / grid-template-rows
列と行のトラックサイズを定義する。スペース区切りで左から順に各トラックのサイズを指定する。px・%・fr（後述）・auto・minmax()など多様な単位と関数が使える。
gap（旧: grid-gap）
グリッドアイテム間の余白（ガター）を設定する。row-gapとcolumn-gapの一括指定だ。値を2つ書いた場合は「行方向のgap / 列方向のgap」の順になる。
grid-template-areas
グリッドエリアに名前を付けて視覚的にレイアウトを定義できる、CSS Gridでも特に強力なプロパティだ。「どこに何を置くか」をASCIIアートの感覚で書けるのが直感的でいい。
Point
エリア名に .（ドット）を使うと「空のセル」を表現できる。"header . main" と書けばヘッダーとメインの間に空のセルが挟まる。
justify-items / align-items
全グリッドアイテムのセル内での水平・垂直位置をまとめて指定する。個別のアイテムには justify-self / align-self で上書きできる（後述）。
アイテムのプロパティ
グリッドアイテム側に指定するプロパティで、個々の配置位置や大きさをコントロールする。
grid-column / grid-row
アイテムが占めるグリッドラインの範囲を指定する。開始ライン / 終了ライン の形式が基本。span N を使えば「Nトラック分広げる」という相対指定もできる。
grid-area
アイテムに名前付きグリッドエリアを割り当てる。grid-template-areas と組み合わせるのが基本の使い方だ。row-start / column-start / row-end / column-end の4値形式でも書ける。
justify-self / align-self
個別のグリッドアイテムのセル内での水平・垂直位置を指定する。コンテナーの justify-items / align-items による設定を上書きする形だ。
fr単位とminmax()の活用
CSS Gridで新しく追加された fr（fractional unit）単位と minmax() 関数は、崩れにくいレイアウトを作る上で欠かせない。この2つの理解が「CSS Gridを使いこなせる」かどうかの分岐点になる。
fr単位とは
fr は「グリッドコンテナーの余白スペースを分割する比率」を表す単位だ。固定幅のカラム（pxや%）を除いた残りのスペースをfrの比率で分配する。
minmax()関数
minmax(最小値, 最大値) はトラックのサイズに最小・最大の制約を設ける関数だ。コンテナーが縮んでも最小幅を守り、広がっても最大幅を超えない。レスポンシブで崩れないカラムを作りたいとき、これが本領を発揮する。
Point
最大値に 1fr を指定すると、利用可能スペースが最小値より大きい時は比率で伸縮し、最小値以下になったら最小値を守る。minmax(最小px, 1fr) がCSS Gridで多用される理由がここにある。
auto-fit/auto-fillによるレスポンシブグリッド
メディアクエリを一切書かずにレスポンシブなグリッドを実現できる——CSS Gridの最大の強みの一つだ。repeat() 関数の第1引数に auto-fit または auto-fill を使う。
基本パターン（RAM: Repeat, Auto, Minmax）
コンテナー幅に応じてカラム数が自動調整されるグリッドは、次のパターンで実現できる。
auto-fit と auto-fill の違い
どちらも「コンテナーに収まるだけトラックを作る」点では同じだが、アイテムが少ない時の挙動が違う。ここが使い分けのポイントだ。
| プロパティ | アイテムが少ない時の挙動 | 使い所 |
|---|---|---|
| auto-fill | 空のトラックを保持し、アイテムを左寄せに配置 | カラム数を維持したい時（ページネーションがある一覧など） |
| auto-fit | 空のトラックを折り畳み、アイテムが幅いっぱいに広がる | アイテムを画面幅いっぱいに並べたい時（フィーチャーカードなど） |
実践レイアウト5パターン
コードで見ると一番わかりやすい。実際によく使われるレイアウトパターンを5つ紹介する。いずれもコピーしてそのまま使える。
パターン1: ホーリーグレイルレイアウト
ヘッダー・フッターが全幅、中央にメインコンテンツ、両側にサイドバーとナビゲーションを持つ伝統的なレイアウトだ。WordPressテンプレートやCMSのデフォルトレイアウトでよく見る構成で、CSS Gridなら数行で書ける。
パターン2: カード一覧（レスポンシブ）
EC・ポートフォリオ・ツールサイトで頻出のカード一覧パターンだ。auto-fitを使えばメディアクエリなしでレスポンシブになる。Next.jsやNuxtのページテンプレートでも定番のレイアウト。
パターン3: マガジンレイアウト
ニュースサイト・ブログ・メディアサイトでよく見かける、異なるサイズのカードが混在するレイアウトだ。CSS Gridの真骨頂といえる非均一なグリッドが数十行で書ける。
パターン4: ダッシュボードレイアウト
SaaS管理画面やデータ分析ダッシュボードで定番のレイアウトだ。サイドバーを固定しつつ、メインエリアにウィジェットをグリッドで並べる構成はNext.jsのApp Routerでもよく使われる。
パターン5: フッターレイアウト
マルチカラムフッターをCSS Gridで組むと、メディアクエリでの列組み替えが非常に楽になる。ロゴカラムを広めに取って、リンクカラムを均等に並べるパターンをそのまま使ってほしい。
ツールで効率化
実際にグリッドを試しながら設計したい場合は、当サイトのCSS Gridジェネレーターが便利だ。視覚的にカラム・行・gapを設定し、生成されたCSSコードをそのままコピーできる。
CSS Gridジェネレーターの使い方
CSS Gridのプロパティは多数あり、慣れるまでは頭の中でレイアウトをイメージしながらコードを書くのが大変だ。そこで活用したいのがToolShare LabのCSS Gridジェネレーターだ。
-
カラム数と行数を設定する
スライダーまたは入力フォームでカラム数・行数を指定。各トラックのサイズは個別に変更でき、fr・px・%・autoなど主要単位に対応している。
-
gapを調整する
行・列のgapをリアルタイムプレビューで確認しながら設定できる。デザインに合わせてピクセル単位で微調整してみよう。
-
アイテムの配置を指定する
グリッドセルをクリック&ドラッグでアイテムをスパン配置できる。grid-column / grid-rowの値は自動計算される。
-
CSSをコピーする
「CSSをコピー」ボタンで生成コードをクリップボードにコピーし、プロジェクトにそのまま貼り付け可能。コンテナーとアイテムのCSSが分けて出力される。
Point
ジェネレーターはあくまで出発点だ。生成されたCSSをベースに minmax() や auto-fit を追加してレスポンシブ対応を加えたり、grid-template-areas で可読性を高めるなど、プロジェクトに合わせてカスタマイズしていこう。
ブラウザの開発者ツールで確認する
CSS Gridのデバッグにはブラウザ内蔵の開発者ツールが特に便利だ。ChromeもFirefoxも、グリッドコンテナーを検査するとグリッドラインのオーバーレイ表示機能がある。ネストが複雑なときは必ず使いたい。
- Chrome DevTools: 「Elements」タブで要素を選択 → 「Grid」バッジをクリックしてオーバーレイ表示
- Firefox DevTools: 「インスペクター」でグリッドコンテナーの「grid」マークをクリック
- ライン番号、エリア名、ギャップのサイズが視覚的に確認できる
- アイテムを選択してgrid-column/grid-rowのスパンを確認できる
CSS Grid ブラウザサポート状況（2026年）
CSS Grid（Level 1）は2026年現在、全モダンブラウザで完全サポートされている。Edge・Chrome・Firefox・Safari・Opera、いずれも対応済みで世界のブラウザシェアの97%以上をカバーしている。IE11はサポートが2022年6月に終了しているため、もはや考慮不要だ。
subgrid（Level 2）はFirefox 71以降・Chrome 117以降・Safari 16以降で使える。ネストされたグリッドが親グリッドのトラックを引き継げる高度な機能で、複数カードの内部要素を縦横揃えるような実装がきれいに書けるようになる。今後の案件では積極的に使っていい段階になってきた。