フロントエンド開発をサポートするオンラインジェネレーター

CSSグリッドを自由にカスタマイズ!Grid-template-columns ジェネレーター

CSS の grid-template-columnsgrid-template-rows を簡単に設定できる Grid-template Generator。カラム数・行数・ギャップをスライダーで調整するだけで、グリッドレイアウトを直感的に作成できます。リアルタイムプレビューで、 CSS コードを確認・コピー してお使いください。

生成されたCSSコード:

使い方

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