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 Grid 佈局產生器，可視化調整欄數、列數、間距、區域，即時預覽佈局效果並產生 CSS 程式碼，適合複雜頁面佈局設計。

css gridgrid布局layoutcolumnsrows