グリッド

格子を先に引いておくと、要素を置くたびに位置を考えずに済みます。グリッドは整列を仕組みにしたものです。

図を大きく見る

図の中身を文字で読む

• 12カラムグリッド　2・3・4・6 で割り切れるので、よくある分割がすべて表現できる
• 12カラム分（全幅）
• 8カラム分（本文）　4カラム分（サイドバー）
• 4　4　4
• カラムとカラムの間の空き＝ガター。行送りより狭いと、列が分離して見えない。
• グリッドの種類
• 単一カラム＝読み物　／　多段カラム＝新聞・雑誌型　／　モジュラー＝縦横に分割した升目　／　階層＝内容に合わせて不均等
• すべてを格子に乗せると、1つだけ外した要素が強く目立つ。基準がなければ、外れることに意味が生まれない。

ひと目で#

グリッド

版面を一定の規則で分けた、見えない格子。配置の判断を毎回しなくて済む

カラム

縦の分割単位。要素の幅はこの倍数で決まる

ガター

カラムとカラムのあいだの空き

12カラム

2、3、4、6 で割り切れる。よくある分割をすべて表せる

モジュラーグリッド

縦横に分けた升目。縦の位置も揃う

サブグリッド

入れ子の要素が、親の格子線を引き継ぐ

使い分け#

12カラムが効くのは、同じ骨格に 8+4・6+6・3+3+3+3 と違う分割を載せるときです。載せる分割が1種類しかないなら、その分割をそのまま列にします。

図を大きく見る

図の中身を文字で読む

• ✕ 3つしかないのに12カラム　○ 中身の数で決める
• span 4 を3回。9本の線は一度も使われない　3分割そのもの。または auto-fit に任せる
• span 4　span 4　span 4　1列　1列　1列
• 列数を変えるたびに span を全部書き直す。　repeat(auto-fit, minmax(16rem, 1fr))
• 12 は「使える分割が多い」だけで、正解ではない。　列数は幅と最小幅から決まる。span を書かない。
• 12カラムが効くのは、同じ骨格に 8+4・6+6・3+3+3+3 と違う分割を載せるテンプレートのとき。
• 1種類の分割しか載せないなら、その分割をそのまま列にする。

間違えやすいところ#

• ✕ガターを行送りより狭くする列が分かれて見えない
• ✕ガターと節のあいだの余白を同じ値にする近接の階層が消える
• ✕1fr をそのまま使う中身が長いと列が広がってはみ出す。minmax(0, 1fr) にする
• ✕見た目の順と DOM の順を食い違わせるタブの順序が読めなくなる
• ✕display: grid と書いただけでグリッドだと考える基準の体系を決めていなければ、グリッドではない

1fr の落とし穴は、実際に横スクロールが出て初めて気づきます。1fr の最小幅は auto で、中身より狭くなりません。長い ID・URL・商品名が入った列だけが押し広げられ、親からはみ出します。

図を大きく見る

図の中身を文字で読む

• ✕ grid-template-columns: 1fr 1fr　○ minmax(0, 1fr)
• 1fr の最小幅は auto。中身より狭くならない　最小を 0 にすると、列が中身に負けない
• 親の幅　親の幅
• ORD-2026-0831-A　残りの列　ORD-2026-…　残りの列
• 長い ID が折り返せない列　列の中で切るか折る
• 越える
• 列が中身に押し広げられ、親からはみ出す。　中身は列の中で処理する。text-overflow か overflow-wrap で決める。
• 画面の幅を縮めても、この列だけ縮まない。　グリッドだけでなく、flex の子（min-inline-size: 0）でも同じことが起きる。
• 横スクロールの原因を探すときは、まずこの列を疑う。管理画面の ID 列・URL・長い商品名で起きやすい。
• 親を 100% にしても直らないのは、はみ出しているのが親ではなく列だから。

同じことは Flexbox の子でも起きます。そちらは min-inline-size: 0 で止めます。

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

例として、台所道具の店で、商品一覧を組み直しています。カードは3枚。写真・商品名・説明文・税込価格・「かごに入れる」の5要素で、説明文だけが1行のものと3行のものが混ざります。

図を大きく見る

直す前は flex に width: 32% で3列を作っていました。説明文が3行ある前掛けのカードだけが縦に伸び、価格とボタンの位置が3枚でずれます。値段を見比べようとすると、視線が上下に往復します。

列は repeat(auto-fit, minmax(16rem, 1fr)) に任せ、幅の指定をやめます。そのうえでカードの中を4行（写真・見出しと本文・価格・ボタン）のグリッドにし、grid-template-rows: subgrid で親の行を引き継がせます。カードの中の行位置が、隣のカードと同じ線の上に乗ります。 上の実例で、価格の下に引いた破線がボタン行の上端です。3枚とも同じ高さで揃っています。

subgrid が使えない環境では、価格の行を margin-block-start: auto で下端に寄せます。完全な整列にはなりませんが、ボタンだけは揃います。

起点は 3列カードグリッド、行を揃えるなら サブグリッドで行を揃えるカード です。

確認する#

• 説明文が1行のカードと3行のカードで、価格とボタンの上端が同じ高さにある
• 商品名を長いものに差し替えても、その列だけ広がらない（minmax(0, 1fr) が効いている）
• 320px で1列に落ち、横スクロールが出ない

使えるパターン#

• 3列カードグリッド
• サブグリッドで行を揃えるカード
• 特徴の3列グリッド

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は並べる・揃えるにまとめてある。逆引きには全188件。

列を組む#

この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 並べ方（Flexbox と Grid）

列数と溝の幅を決め、メインとサイドの配置をプレビューします。既定は12列・メイン8・サイド4です。

この道具は JavaScript で動きます。

出典#

• MDN「CSS グリッドレイアウト」
• Josef Müller-Brockmann『Grid Systems in Graphic Design』

関連#

• 版面と行長幅をどこで決めるか
• 余白ガターと余白の関係
• レイアウトの実装Flexbox との使い分け
• 整列グリッドは整列を仕組みにしたもの