🔲 CSSグリッドレイアウト ジェネレーター

使い方

1. スライダーで列(Columns)と行(Rows)の数を、それぞれ1〜6の範囲で設定します。
2. 余白(Gap)のスライダーで、グリッドアイテム間のすき間を0〜40pxの範囲で調整します。
3. 列サイズ・行サイズの指定欄で、各トラックに1fr、2fr、固定px、auto、minmaxなど好みのサイズ単位を選びます。
4. プレビューで仕上がりを確認し、下部の「コードをコピー」ボタンで完成したCSS/HTMLをコピーします。

よくある質問

生成されたコードは、そのまま実務のプロジェクトで使えますか?

はい。grid-containerとgrid-itemのクラスをベースにした標準的なCSS Gridのコードなので、そのまま貼り付けて、クラス名やアイテム数だけ好きなように書き換えれば使えます。

列や行を7つ以上にはできませんか?

スライダーでの指定は現在6つまでです。それ以上のトラックが必要な場合は、コピーしたCSSのgrid-template-columns/rowsの値を直接書き足して拡張してください。

grid-template-columnsにminmax(100px, 1fr)を指定すると、どうなりますか?

その列の最小幅を100pxで確保しつつ、余ったスペースは1frの比率で柔軟に伸びるようになります。レスポンシブなレイアウトで、コンテンツが狭くなりすぎるのを防げます。