🔲 CSS Gridジェネレーター
CSS Grid レイアウトを GUI で組み立てるツールです。列数・行数、各トラックのサイズ（fr / px / auto / minmax）、gap、整列プロパティ（justify-items / align-items / justify-content / align-content）を設定すると、ライブプレビューと生成 CSS がリアルタイムで更新されます。アイテムの数を増減して並びも確認でき、出力はワンクリックでコピーできます。
グリッドの設定
ライブプレビュー
枠がグリッドコンテナ、番号付きの箱がグリッドアイテムです。設定を変えるとリアルタイムに反映されます。
生成された CSS
—
コンテナに .container、子要素に付ける想定の CSS です。HTML側は <div class="container">…子要素…</div> の形になります。
解説
CSS Grid（グリッドレイアウト）は、要素を「列」と「行」からなる二次元の格子に沿って配置する仕組みです。親要素に display: grid を指定し、grid-template-columns で列、grid-template-rows で行のトラック（帯）の数とサイズを決めると、子要素が左上のセルから順に流し込まれます。横一列・縦一列の並びが得意な Flexbox に対し、Grid は行と列を同時に制御できるのが最大の違いで、カード一覧・ダッシュボード・フォーム・ページ全体の骨組みなど、縦横がそろったレイアウトに向いています。本ツールは、その各プロパティを GUI で触りながら、生成される CSS とプレビューを同時に確認できます。
トラックのサイズには複数の単位を混在できます。最も便利なのが fr（fraction・割合）で、コンテナの余ったスペースを比率で分け合います。例えば 1fr 2fr なら左右が 1:2 になり、画面幅が変わっても比率を保ちます。px は固定幅、auto は中身に合わせた幅、minmax(最小, 最大) は「最小・最大の範囲で伸縮」を表します。minmax(200px, 1fr) のように書くと、200px を下限にしつつ余白は fr で埋める、といった実用的な指定ができます。同じサイズの繰り返しは repeat(3, 1fr) と短く書けますが、本ツールは1トラックずつ明示する分かりやすい形で出力します。
セル同士の間隔は gap でまとめて指定します。gap: 8px のように1つ書けば行間・列間が同じ値になり、gap: 8px 16px のように2つ書くと「行間 列間」の順で別々に設定できます（本ツールは行間と列間が同じときは自動で1つにまとめて出力します）。かつては grid-gap と呼ばれていましたが、現在は gap が標準で Flexbox でも使えます。マージンで隙間を作る方法と違い、外周に余分な余白が出ず、要素間だけに均等な間隔を入れられるのが利点です。
整列プロパティは「セルの中身をどう置くか」と「グリッド全体をどう置くか」の2系統に分かれます。justify-items / align-items は各セル内でアイテムを横・縦のどちら寄せにするか（stretch で引き伸ばし、start/center/end で寄せ）を決めます。一方 justify-content / align-content は、トラック全体の合計サイズがコンテナより小さいときに、グリッドのかたまり自体をコンテナ内でどう配置するかを決めます。fr でトラックを埋めていると余白が生じないため *-content は効きにくく、px 等の固定トラックのときに違いがはっきり出ます。すべての処理はブラウザ内で完結し、入力内容はどこにも送信されません。
よくある質問
CSS Grid と Flexbox はどう使い分けますか？
おおまかには、行と列の両方をそろえたい「二次元」のレイアウトは Grid、横一列または縦一列に要素を並べる「一次元」の配置は Flexbox が得意です。カードを格子状に並べる、ページ全体をヘッダー・サイドバー・本文に分ける、といった用途は Grid が向きます。ボタンを横並びにして間隔を空ける、ナビの項目を等間隔に置く、といった用途は Flexbox が手軽です。両者は併用でき、Grid のセルの中を Flexbox で整える組み合わせもよく使われます。
fr 単位とは何ですか？px との違いは？
fr は「fraction（割合）」を表す Grid 専用の単位で、コンテナの余ったスペースを比率で分け合います。1fr 1fr 1fr なら3等分、1fr 2fr なら 1:2 です。px が画面幅に関わらず固定なのに対し、fr は幅の変化に応じて自動で伸縮するため、レスポンシブなレイアウトを作りやすいのが特長です。固定したい部分だけ px、可変にしたい部分は fr、と混在させるのが実践的です。
minmax() はどんなときに使いますか？
minmax(最小, 最大) は、トラックのサイズに下限と上限を設けたいときに使います。例えば minmax(200px, 1fr) は「最低でも 200px は確保しつつ、余白があれば 1fr として広がる」という意味になり、狭い画面でつぶれすぎず、広い画面では伸びる列を作れます。本ツールでは各トラックの入力欄に minmax(100px, 1fr) のように直接書けば、そのままプレビューと生成 CSS に反映されます。
gap を1つ書くのと2つ書くのは何が違いますか？
gap: 8px のように値を1つだけ書くと、行間（row-gap）と列間（column-gap）が同じ値になります。gap: 8px 16px のように2つ書くと「行間 列間」の順で別々に指定でき、この例では上下の隙間が 8px、左右の隙間が 16px になります。本ツールは行間と列間が同じ値のときは自動的に1つにまとめて出力し、違うときは2値で出力します。
justify-items と justify-content の違いは？
justify-items（および align-items）は「1つ1つのセルの中で、アイテムを横／縦のどちらに寄せるか」を決めます。justify-content（および align-content）は「トラック全体のかたまりを、コンテナの中でどこに置くか」を決めます。後者は、列や行の合計サイズがコンテナより小さくて余白があるときにだけ効果が見えます。fr でトラックを埋めていると余白が生じないため *-content は変化しにくく、px など固定サイズのトラックにすると違いがはっきり分かります。
生成した CSS はどう使えばいいですか？
出力される CSS は .container というセレクタに対するスタイルです。HTML 側で親要素に class="container" を付け、その中に子要素（グリッドアイテム）を並べれば、生成した通りのレイアウトになります。セレクタ名はプロジェクトに合わせて自由に変えて構いません。子要素側で grid-column / grid-row を使えば、特定のアイテムを複数セルにまたがせる（結合する）こともできます。
どんな場面で CSS Grid が向いていますか？
商品カードや記事サムネイルを格子状に並べる一覧、数値パネルを敷き詰めるダッシュボード、ラベルと入力欄を2列にそろえるフォーム、ヘッダー・サイドバー・メイン・フッターに分けるページ全体の骨組みなど、縦横の整列が求められる場面で威力を発揮します。特に repeat(auto-fill, minmax(...)) と組み合わせると、画面幅に応じて列数が自動で増減するカードグリッドを、メディアクエリなしで作れます。
入力した内容はサーバーに送られますか？
送られません。CSSの生成もプレビューもすべてブラウザ内で完結し、設定内容はどこにも送信されません。オフラインでも利用できます。