CSS の grid-template-columns
と grid-template-rows
を簡単に設定できる Grid-template Generator。カラム数・行数・ギャップをスライダーで調整するだけで、グリッドレイアウトを直感的に作成できます。リアルタイムプレビューで、 CSS コードを確認・コピー してお使いください。
生成されたCSSコード:
使い方
- カラム数を設定する
- スライダーを動かして、カラム数(横の数) を変更できます。
- 数値がリアルタイムで更新され、プレビューにも反映されます。
- 行数を設定する
- 行数(縦の数) もスライダーで簡単に調整できます。
- 必要な数だけグリッドアイテムを表示させることが可能です。
- ギャップ(間隔)を設定する
- グリッドアイテム同士の間隔(gap) をスライダーで調整できます。
- ピクセル単位で変更でき、すぐにプレビューに反映されます。
- リアルタイムでグリッドの変化を確認
- スライダーを動かすだけで、すぐにグリッドレイアウトが変更されます。
- 設定したカラム・行・ギャップが即座にプレビューに反映されるので、試しながらデザインを決められます。
- CSSコードをコピーして使う
- 生成された CSS コードをコピー し、そのまま Web 制作に活用できます!
grid-template-columns
とgrid-template-rows
の設定がすぐに適用可能です。
- リセットボタンで初期状態に戻せる
- 設定をリセットしたい場合は「リセット」ボタンをクリックするだけ!
- デフォルトの 4×4 のグリッドに戻すことができます。