Developer Layout Utility
CSS Grid Generator
columns、rows、gap、minmax、auto-fit、配置オプションをリアルタイムでテストし、CSS Grid コードを即座に生成できるレイアウト作成ツールです。
Grid 設定
Grid コンテナの列、行、間隔、整列、アイテム数を設定してください。
通常の repeat、レスポンシブ auto-fit、カスタム入力モードを選択します。
auto-fit minmax モードで使用されます。
custom template モードで使用されます。例: 240px 1fr 1fr, minmax(180px, 1fr) 2fr
生成結果
現在の CSS Grid 設定に基づくコードです。
Grid 設定を変更した後、CSS コード生成ボタンを押してください。
Grid 使用方法比較
レイアウトの目的に応じて repeat、auto-fit、custom template を選択できます。
繰り返し列
繰り返し列
繰り返し列
ヘルプ
CSS Grid Generator とは？
CSS Grid Generator は Grid レイアウトをリアルタイムで試しながら、grid-template-columns、gap、minmax、auto-fit コードを自動生成できる開発者向けユーティリティです。
カードリスト、画像ギャラリー、管理ダッシュボード、ユーティリティ一覧、ブログ一覧、ランディングページのセクション作成などに活用できます。
主な機能
- repeat ベースの固定列 Grid 作成
- auto-fit minmax ベースのレスポンシブ Grid 作成
- custom grid-template-columns の直接入力
- column gap、row gap、item height 調整
- justify-items、align-items の設定
- container padding、item radius 調整
- リアルタイムプレビューと CSS コードのコピー・ダウンロード
repeat と auto-fit の違いは？
repeat(3, 1fr) は常に 3 列を維持します。一方、repeat(auto-fit, minmax(220px, 1fr)) は画面幅に応じて列数が自動調整されます。
auto-fit minmax はいつ使いますか？
カード一覧、商品一覧、画像ギャラリーのように画面サイズに応じて自然に折り返したい場合に最適です。
custom template はどんな時に使いますか？
240px 1fr のようなサイドバー構成や、1fr 2fr 1fr のような比率の異なる列レイアウトで使用します。
gap と padding の違いは？
gap は Grid アイテム間の余白、padding は Grid コンテナ内部の余白です。
生成された CSS はそのまま使えますか？
生成コードは基本的な Grid レイアウトです。実際のプロジェクトでは親要素の幅やレスポンシブ設定も確認してください。