CSSグリッド生成

CSSグリッド生成

列・行・ギャップを指定して、コピーできるgrid-template CSSとプレビューを得ます。

列数行数列のサイズ行の高さ

行の間隔（px）列の間隔（px）アイテム水平配置アイテム垂直配置グリッド水平配置

プレビュー

1

2

3

4

5

6

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
}

列・行は24まで、間隔は200pxまでです。プレビューは汎用セルで表示します。span・名前付きエリア・レスポンシブ設定は生成しません。

すべてこのブラウザ内で実行します。

使い方

列・行・ギャップを設定します。
プレビューを確認します。
生成CSSをコピーします。

対応範囲

pxまたはfr単位で最大12×12トラック。grid-templateと任意の配置クラスを生成します。完全なレイアウトビルダーではありません。