このツールについて
列数と行数、gap を設定して CSS グリッドを構築し、コードをコピーできます。すべてブラウザ内で完結します。
よくある質問
トラックのサイズはどう決まりますか？
列と行は repeat() と 1fr を使うため、利用可能なスペースを均等に分け合います。
gap コントロールとは何ですか？
各セル間の grid gap をピクセル単位で設定し、プレビューにリアルタイムで反映します。
100% ブラウザ内で完結
▦
CSS Grid ジェネレーター
列・行・gap を調整できる CSS グリッドレイアウトを、ライブプレビュー付きで生成します。