CSS Grid入門｜fr・minmax・gap・整列を実例で解説
公開日：2026年10月6日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：CSS Gridジェネレーター
CSS Grid（グリッドレイアウト）は、要素を「列」と「行」からなる二次元の格子に沿って並べる仕組みです。横一列・縦一列が得意なFlexboxと違い、Gridは行と列を同時に制御できます。このツールは列数・行数、各トラックのサイズ、gap、整列プロパティをGUIで設定すると、生成CSSとライブプレビューが同時に更新されます。この記事では、出力されるCSSの一つひとつが何を意味するのかを、実際のコード例と計算した数値で読み解いていきます。
基本は grid-template-columns と grid-template-rows
Gridを使うには、まず親要素に display: grid を指定します。そのうえで列の帯（トラック）を grid-template-columns、行のトラックを grid-template-rows で並べます。値を半角スペースで区切った個数が、そのままトラックの本数になります。たとえば列を3本・行を2本にした既定状態では、次のCSSが出力されます。
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 8px; }
子要素は左上のセルから順に、右へ、いっぱいになったら次の行へと自動で流し込まれます。HTML側は親に class="container" を付け、その中に子要素を並べるだけです。列は 1fr、行は auto が既定値になっているのは、幅は均等に割り、高さは中身に合わせるという実用的な初期設定だからです。
fr と minmax() が意味するもの
トラックのサイズにはいくつかの単位を混在できます。fr（fraction・割合）はGrid専用の単位で、コンテナの余ったスペースを比率で分け合います。pxは固定幅、autoは中身に合わせた幅です。frの効き方は計算で確かめると腑に落ちます。コンテナ幅が640px、列を 1fr 1fr 1fr、gapを8pxとすると、列と列の間の隙間は2か所で計16px。残る624pxを3等分するので、各列は208pxになります。1fr 2fr 1fr のように比率を変えれば、合計4frのうち1:2:1で分配され、同じ624pxが156px・312px・156pxに分かれます。
minmax(最小, 最大) は、そのトラックに下限と上限を与える関数です。minmax(200px, 1fr) と書くと「最低でも200pxは確保し、余白があれば1frとして広がる」という意味になり、狭い画面でつぶれず、広い画面では伸びる列を作れます。このツールでは各トラックの入力欄に minmax(100px, 1fr) のように直接書けば、そのまま反映されます。
gap で隙間を作る
セル同士の間隔は gap でまとめて指定します。このツールは行間と列間が同じ値なら gap: 8px のように1値で、違えば「行間 列間」の順で gap: 8px 16px のように2値で出力します。マージンで隙間を作る方法と違い、外周に余分な余白が出ず、要素と要素の間だけに均等な間隔を入れられるのが利点です。かつては grid-gap と呼ばれていましたが、現在は gap が標準名で、Flexboxでも同じように使えます。
整列は「セル内」と「グリッド全体」の2系統
整列プロパティは4つありますが、2つずつ役割が分かれます。justify-items / align-items は各セルの中でアイテムを横・縦のどちらに寄せるかを決めます。既定の stretch はセル幅・高さいっぱいに引き伸ばし、start / center / end は寄せます。もう一方の justify-content / align-content は、トラック全体の合計サイズがコンテナより小さいとき、グリッドのかたまり自体をコンテナ内でどこに置くかを決めます。
ここが混同しやすい点です。列を 100px 100px 100px のような固定トラックにするとトラック合計は約300pxで、640pxのコンテナには余白が残ります。このとき justify-content: center を選ぶと、300pxの塊が中央に寄ります。逆に列を 1fr で埋めていると余白が生じないため、*-content を変えても見た目は動きません。「content系が効かない」と感じたら、まず固定トラックにして試すのが早道です。
Flexbox と Grid の使い分け
おおまかな指針は、行と列の両方をそろえたい「二次元」はGrid、横一列または縦一列に並べる「一次元」はFlexboxです。カードを格子状に敷き詰める一覧、ヘッダー・サイドバー・本文・フッターに分けるページ骨組み、ラベルと入力欄を2列にそろえるフォームはGridが向きます。ボタンを横並びにして間隔を空ける、ナビ項目を等間隔に置くといった用途はFlexboxが手軽です。両者は併用でき、Gridのセルの中をFlexboxで整える組み合わせも定番です。実務では、たとえば grid-template-columns: 240px 1fr と書けば、240pxの固定サイドバーと可変のメイン列という定番レイアウトがすぐ組めます。
よくあるつまずきと注意点
つまずきやすいのは次のような点です。第一に、トラックの本数と子要素の数は無関係で、子要素が足りなければ空きセルができ、多ければ自動で次の行に折り返されます。第二に、justify-content と justify-items の取り違えで、frトラックのまま content 系をいじって「効かない」と悩むケースです。第三に、gapを大きくしたのにfr列が思ったより狭い場合は、先に隙間の合計が引かれてから残りが分配されるためで、計算どおりの挙動です。まずはツールで列数・サイズ・gapを少しずつ変え、生成CSSと数値の対応を目で確かめると、Gridの感覚がつかめます。