CSS Grid レイアウトを組んでルールをそのままコピー
auto-fit のトラックか固定列数を選び、カード最小幅・間隔・配置・要素数を決めるだけ。プレビューは実際の CSS Grid で、出力パネルには grid-template-columns から gap、align-items、justify-items まで含む完全なルールが表示されます。
ブラウザ内でローカルに実行 · grid · minmax() · auto-fit
auto-fit のトラックか固定列数を選び、カード最小幅・間隔・配置・要素数を決めるだけ。プレビューは実際の CSS Grid で、出力パネルには grid-template-columns から gap、align-items、justify-items まで含む完全なルールが表示されます。
ブラウザ内でローカルに実行固定列か auto-fit のトラックを選び、カード最小幅・間隔・要素数を決めると、プレビューは実際の CSS Grid として並び替わり、出力パネルにはそのまま貼れる完全なルール（display: grid、grid-template-columns、gap、align-items、justify-items）が表示されます。
このページの数値は仕様の引用ではなく実測です。初期状態は auto-fit・最小 180px・間隔 16px・8 要素で、ウィンドウ幅 1360px のときプレビューは 494px、同じグリッドは 180px で 2 トラック、80px で 5 トラック、600px で 1 トラックになりました。
auto-fit は repeat(auto-fit, minmax(min(100%, 180px), 1fr)) を出力します（min(100%, …) があるため、最小幅より狭いコンテナでも 1 トラックがはみ出しません）。固定モードは repeat(4, minmax(0, 1fr)) です。どちらも display: grid、gap、align-items、justify-items を含む完全なルールです。
列数を決めるのは最小幅です。494px のプレビューで実測すると、180px は 2 トラック、80px は 5 トラック、600px は 1 トラックでした。間隔は行と列で同じ 1 つの値です。
4 つの数値フィールドには上限と下限があります（列 1〜12、カード最小幅 80〜600px、間隔 0〜96px、要素数 1〜24）。以前は 20 列と入力すると 12 トラックが描画されるのにフィールドは 20 のままでしたが、確定時にフィールドが 12 へ戻るようになり、9999 → 600px、200 → 96px、30 → 24 要素も同じように揃います。
空欄・数字以外・小数も範囲内に丸めます。3.7 は 4、-5 は 1、空にしたフィールドは最小値に戻ります。入力中はプレビューだけが値に追従し、フィールドの文字は書き換えません。
出力するのはコンテナのルール 1 つとサンプル要素のブロックだけです。名前付きエリア（grid-template-areas）、要素ごとの配置（span や row/column）、auto-rows、dense 配置は扱いません。.grid / .grid__item というクラス名は自分のマークアップ用に改名する前提の雛形です。
処理はすべてページ内で完結します。コントロールを操作してコードをコピーする間、ブラウザーの通信は 0 件でした。同じスクリプトは他 4 つのジェネレーター（bezier・clamp・blurhash・gradient）も動かしており、それらのページは変更前後で完全に同一です。グリッドのページは 320・390・768・1360px のいずれでも横スクロールが出ません。