CSS Grid Generator
CSS Grid レイアウトを視覚的に構築。行数・列数・トラックサイズ・ギャップ・配置を設定し、CSS をコピーできます。
1fr 2fr 1fr、240px 1fr、repeat(2, 1fr) 240px のようにスペース区切りで入力します。空にすると各列が 1fr になります。
列トラックと同じ書き方です（例: auto 1fr auto）。空にすると行の高さは内容に合わせます。 12px のような 1 値、または 8px 16px のように行・列の 2 値で指定します。空でギャップなし。
リアルタイムプレビュー
生成された CSS と HTML
使い方
- 列数と行数（それぞれ 1〜12）を設定します。交差した数だけプレビューにセルが並びます。
- 列トラックに
1fr 2fr 1frやrepeat(2, 1fr) 240pxと入力します。空にすると各列が1frになります。 - 行トラックも同じ書き方（
auto 1fr autoなど）。空にすると行の高さは内容に合わせます。 - ギャップは
12pxのように、または8px 16pxのように行・列の 2 値で指定します。空でギャップなし。 - justify-items・align-items・justify-content で、セルがトラック内にどう並ぶかを選びます。
- 出力カードから CSS と HTML をコピーします。
こんなときに
- ページの骨組み: ヘッダー・サイドバー・メイン・フッターを 1 つのグリッド定義に。
- カードの並び:
repeat(auto-fill, minmax(240px, 1fr))のようなレスポンシブグリッド。 - ダッシュボードのパネル: 両端は固定幅、中央は可変の列。
- フォームのレイアウト: ラベルと入力欄を float や table なしで揃える。
- grid の学習: 数字を変えるたびに fr・minmax・ギャップの動きを確認できます。
プライバシーについて
グリッド CSS はこのページ内での文字列の組み立てで生成されます。トラックの値やプレビューがブラウザの外に出ることはなく、オフラインでも動作します。
FAQ
Q: 受け付けられるトラックの書き方は？
A: grid-template-columns / grid-template-rows で有効な値なら何でもです。fr・px・%・em・auto・min-content・max-content・minmax()・fit-content()・repeat()。ツールは文字だけを検査するので、キーワードを打ち間違えてもエラーにはならず、プレビューの崩れとして現れます。
Q: トラック欄が空の場合は？
A: 列は repeat(n, 1fr)（n は列数）にフォールバックし、grid-template-rows 行は出力しません。ギャップ欄が空なら gap 行も省略します。
Q: プレビューの px サイズは正確ですか？ A: プレビューは同じ CSS で描画された実物のグリッドですが、表示幅が狭いです。px トラックは目安として、自分のレイアウトに貼ってから確定してください。
Q: どの配置プロパティを出力しますか？ A: justify-items・align-items・justify-content の 3 つです。justify-items は stretch/start/center/end、align-items は baseline も選択でき、justify-content は space-between/space-around/space-evenly を追加で選べ、normal のときは行を省略します。
データはこのデバイス内にとどまります
CSS Grid Generator は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。