🎨

CSS Grid Generator

css · grid · layout · generator · columns

列行列の間隔行の間隔grid-template-columnsgrid-template-rows

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  column-gap: 16px;
  row-gap: 16px;
}

使い方

1
列・行数と間隔を設定します。
2
grid-template値を直接調整できます。
3
生成されたCSS Gridコードをコピーします。

FAQ

このツールは無料ですか？

はい、登録もインストールも不要で、すぐに完全無料で使えます。

このツールはどんなツールですか？

CSSグリッドレイアウトをビジュアルで作成 — 列・行数・gap・テンプレート値をライブグリッドプレビューで設定登録もインストールも不要で、ページを開けばすぐに無料でお使いいただけます。