CSSグリッドジェネレーター
幅ごとにレイアウトを描く。@media 付きのCSSをそのままコピー。
Reading orderAt Desktop, nav is the first thing seen but main is the first thing focused. Placement has moved the layout out of document order, so keyboard and screen reader users get a different sequence from everyone else.
Seenheader → nav → main → footer
Focusedheader → main → footer → nav
Usually the fix is in the markup, not in CSS: reorder the children so the HTML reads the way the page does, then place them back where you want them. Reaching for order or row-reverse instead moves the picture without moving the focus, which is the bug rather than the cure.
It is not always wrong. A full-height sidebar beside a topbar diverges by construction, and the accepted answer there is a skip link to the main content rather than a reordered document. WCAG 2.2 SC 1.3.2 asks that the sequence be meaningful — not that it be identical.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
grid-template-areas:
"header"
"main"
"footer";
}
.layout > .header { grid-area: header; }
.layout > .main { grid-area: main; }
.layout > .footer { grid-area: footer; }
.layout > .nav { display: none; }
@media (min-width: 768px) {
.layout {
grid-template-columns: 220px 1fr;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
.layout > .nav { grid-area: nav; }
}
1つの固定グリッドでは足りない
多くのCSS Gridジェネレーターは、グリッドを1つだけ出力して終わりです。 しかし実際のサイトでは、モバイルで縦に積んだものをデスクトップでは横に並べる、といった 作り分けが必要になります。このツールはブレークポイントごとに配置を描き分けられ、 メディアクエリを書いた状態のCSSを出力します。
How to use it
-
プレビュー幅を決める
キャンバス上部のルーラーで再生ヘッドをドラッグすると、その幅にキャンバスが変わり、対応するブレークポイントが編集対象になります。右のパネルに現在のブレークポイント名が常に表示されます。
-
領域を描く
グリッド上をドラッグすると名前付きの領域ができます。各領域は出力されるHTMLの子要素1つに対応し、すべてのブレークポイントで共通です。
-
トラックのサイズを指定する
右のトラックパネルで列と行の値を編集します。fr、px、%、auto、min-content、minmax()、repeat() など、トラックリストで有効な記法はすべて使えます。
-
次のブレークポイントで描き直す
再生ヘッドをブレークポイントの目盛りより先へ動かし、自由に配置し直します。変わるのは配置だけで要素は共通のため、出力されるCSSが破綻しません。
-
コードをコピーする
CSS、HTML、Tailwind、shadcn/ui の形式で出力できます。CSSには @media ブロックが最初から含まれています。
grid-template-areas という書き方
grid-template-areas は、レイアウトを文字列の並びとして書ける記法です。
CSSを開いた瞬間に配置が目で見て分かるため、行番号・列番号での指定より読みやすくなります。
ただし領域が重なる配置は表現できません。このツールは重なりを検出すると自動的に
番号指定へ切り替えるため、描いたとおりの結果が必ず出力されます。
はみ出しの原因は minmax(0, 1fr) で直る
1fr は「余りを等分する」と説明されますが、正確には最小値が auto です。
そのため中身の大きい要素があるとトラックが押し広げられ、グリッド全体がはみ出します。
長いテキストや画像、overflow: auto を持つ要素でよく起きる問題で、
minmax(0, 1fr) に変えれば最小値が0になり解消します。
Flexbox とどう使い分けるか
行と列を同時に制御したいとき、つまりページ全体の骨組みには CSS Grid が向きます。 ナビゲーションのリンク列やボタンの並びのように一次元に並べるだけなら Flexbox のほうが簡潔です。 実際のサイトでは両方を組み合わせ、外側をGrid、内側をFlexboxにする構成がよく使われます。 Flexbox の各プロパティは Flexboxジェネレーター で試せます。
他のツール
Frequently asked questions
CSS Grid とは何ですか？
このジェネレーターは他と何が違いますか？
@media ブロック込みのCSSを出力します。grid-template-areas と行番号指定はどちらを使うべきですか？
grid-template-areas はCSSを読んだだけでレイアウトが目で見て分かるため、通常はこちらが読みやすくなります。ただし領域が重なる配置は表現できないため、その場合は行番号・列番号での指定が必要です。このツールは重なりを検出すると自動的に番号指定へ切り替えます。グリッドの子要素がはみ出すのはなぜですか？
1fr の最小値が auto であるためです。中身が大きいとトラックが押し広げられます。minmax(0, 1fr) に変えると最小値が0になり、はみ出しが解消します。長いテキストや画像を含むグリッドでよく起きる問題です。作ったレイアウトは保存や共有ができますか？
CSS Grid の対応ブラウザは？
subgrid も Firefox 71、Safari 16、Chrome 117 以降で利用できます。