無料・登録不要
CSS Gridジェネレーター
CSS Gridレイアウトを視覚的に作成
グリッド設定
CSSコード
前回の設定があります
CSS Gridレイアウトを視覚的に作成
CSS Gridレイアウトを視覚的に構築できる無料ツールです。行・列の定義、エリア名の設定、ギャップの調整をGUIで操作。複雑な2次元レイアウトも直感的に作成できます。
ドラッグでグリッドエリアを定義・調整
fr、px、%、auto、minmax()に対応
grid-template-areas含む完全なCSSを出力
レスポンシブな2次元レイアウトを素早く構築したい場面
スライダーで行・列・ギャップを調整しながらリアルタイムプレビュー。CSSコードを即コピーできます
デザインカンプのグリッドシステムをCSSで再現する場面
fr・auto・minmax()を視覚的に試せるので、意図通りのグリッドレイアウトを短時間で実現できます
justify-itemsやalign-itemsの効果を理解したい場面
各プロパティの変更がリアルタイムで反映されるため、CSS Gridの挙動を直感的に学べます
行数・列数を設定し、各トラックのサイズを指定します。
グリッドセルをクリックしてエリア名を割り当てます。
行間・列間のギャップをスライダーで設定します。
生成されたgrid-template CSSをコピーして使用します。