ToolNext

CSS Gridジェネレーター

CSS Gridレイアウトコードをビジュアル生成

1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px 16px;
}

工具说明

列数・行数・間隔・エリアをビジュアル調整してレイアウトをリアルタイムプレビューし、CSSコードを出力するオンラインCSS Gridジェネレーター。

css gridgrid布局layoutcolumnsrows