こんな方におすすめ
- カード一覧を作る開発者
- 行と列の構成を比較するデザイナー
Developer Layout Utility
CSS Grid生成ツール
columns、rows、gap、minmax、auto-fit、配置オプションをリアルタイムでテストし、CSS Grid コードを即座に生成できるレイアウト作成ツールです。
Grid レイアウト作成
columns、rows、gap、minmax を調整してカード型 Grid レイアウトを素早く作成できます。
リアルタイムプレビュー
設定変更時に Grid 配置、間隔、アイテム高さ、整列状態をすぐに確認できます。
CSS コードコピー
生成された grid-template、gap、align-items、justify-items コードをコピーまたは CSS ファイルとして保存できます。
Grid 設定
Grid コンテナの列、行、間隔、整列、アイテム数を設定してください。
クイックプリセット
よく使われる Grid パターンをすぐに適用できます。
通常の repeat、レスポンシブ auto-fit、カスタム入力モードを選択します。
1
3個
8
1
2個
6
2
6個
24
0px
18px
60px
0px
18px
60px
120px
220px
360px
auto-fit minmax モードで使用されます。
80px
120px
220px
0px
24px
60px
0px
20px
40px
custom template モードで使用されます。例: 240px 1fr 1fr, minmax(180px, 1fr) 2fr
Live Preview
Mode
repeat
Columns
3
Gap
18px / 18px
生成結果
現在の CSS Grid 設定に基づくコードです。
Grid 設定を変更した後、CSS コード生成ボタンを押してください。
Grid 使用方法比較
レイアウトの目的に応じて repeat、auto-fit、custom template を選択できます。
repeat columns
繰り返し列
auto-fit minmax
繰り返し列
custom template
繰り返し列
内容に合ったCSS Gridの列構成を選ぶ
固定列数、auto-fit、カスタム列指定を比較してCSSを生成します。余白と整列をプレビューし、実際の文章や画像でレイアウトを確認します。
活用場面
- 画面幅に応じたカード一覧を作る。
- サイドバーと可変幅の本文を並べる。
入力から結果の確認まで
- 1
固定列数・auto-fit・カスタムから選びます。
- 2
列数またはカードの最小幅を設定します。
- 3
行の高さ、間隔、内側余白、整列を調整します。
- 4
異なる画面幅でプレビューを確認します。
- 5
CSSを生成し、コンテナーと要素に適用して実際の内容で検証します。
幅に応じたカード
- 入力
- auto-fit、最小幅220px、間隔20px
- 結果
- repeat(auto-fit, minmax(220px, 1fr))
最小幅と余白を下回る画面では追加のルールが必要です。
本文付きサイドバー
- 入力
- カスタム: 260px minmax(0, 1fr)
- 結果
- 260pxの列と残り幅を使う列を作ります。
本文は縮みますが、固定幅のサイドバーにはモバイル対応が必要です。
計算・処理の仕組み
モードからgrid-template-columnsを作り、行サイズ、間隔、整列、余白、角丸を出力します。カスタム値は200文字までで、宣言を区切る記号を拒否し、利用可能な環境ではCSS.supportsで確認します。
注意点と制限
- 番号付きの例は長文や画像の固有サイズを再現しません。
- ブレークポイントや意味のある読み順は自動設計しません。
- grid areasや親子のsubgrid構成を組み立てる専用操作はありません。
データの取り扱い
レイアウト値はブラウザー内で処理します。
参考資料
あわせて使えるツール
- Flexboxレイアウト練習
空の状態の案内を中央に配置する。
- ガラス風CSS生成ツール
模様のある背景にカードを重ねる。
よくある質問
auto-fitなら横にはみ出しませんか？
最小列幅がコンテナーより広いと、はみ出す場合があります。余白と内容も確認してください。
カスタム値が拒否されるのはなぜですか？
宣言全体ではなくgrid-template-columnsの値だけを入力します。
追加の行の高さはどうなりますか？
固定モードの明示的な行を超える要素には、設定したgrid-auto-rowsの高さを使用します。