CSSグリッドレイアウト生成ツール
列・行・間隔を調整してCSS Gridコードを即座に生成
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
Webデザイナーやフロントエンド開発者向けのCSS Gridビジュアルビルダーです。列と行の数、各トラックのサイズ(1fr、固定px、auto、minmaxなど)、間隔(gap)をスライダーやセレクトで調整すると、プレビューがリアルタイムで更新され、完成したCSSとHTMLコードをそのままコピーできます。処理はすべてブラウザ内で完結し、サーバーにデータが送信されることはありません。
使い方
- スライダーで列(Columns)と行(Rows)の数をそれぞれ1〜6の範囲で設定します。
- 間隔(Gap)スライダーでグリッドアイテム間の余白を0〜40pxの範囲で調整します。
- 列幅の設定・行高の設定で、各トラックに1fr、2fr、固定px、auto、minmaxなど好みのサイズ単位を選びます。
- プレビューで結果を確認し、「コードをコピー」ボタンで完成したCSS/HTMLをコピーします。
よくある質問
- 生成されたコードをそのままプロジェクトで使えますか?
- はい。grid-containerとgrid-itemクラスを基準にした標準的なCSS Gridコードなので、そのまま貼り付けてクラス名やアイテム数を必要に応じて調整するだけで使えます。
- 列や行を7個以上にできますか?
- 現在のスライダーは最大6個までです。それ以上必要な場合は、コピーしたCSSのgrid-template-columns/rowsの値を手動で拡張してください。
- minmax(100px, 1fr)を使うとどうなりますか?
- その列の最小幅を100pxに保証しつつ、余ったスペースは1frの比率で柔軟に広がるようにします。レスポンシブレイアウトでコンテンツが狭くなりすぎるのを防げます。