CSS Grid 視覺化產生器

視覺化編輯 CSS Grid:**rows / cols 自由增刪**(支援 fr / px / % / auto)、**gap**、**命名 grid areas**(可任意覆蓋多格)。即時預覽 + 自動產生 `grid-template-areas` 字串 + 完整 CSS 輸出(包含每個 area 的 `grid-area`)。內建 Holy Grail、2-col split、Dashboard 12-col 範本。

範本

Cols(欄)

Rows(列)

Gappx

命名 areas

row→ rowcol→ col

即時預覽

header

sidebar

main

footer

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

輸出 CSS

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 3fr 1fr;
  gap: 12px;
  grid-template-areas:
    "header header"
      "sidebar main"
      "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

›如何使用

拖動 rows / cols 滑桿調整網格欄列數。
點任一個格子拖曳,可以指定 named area(像 header、sidebar)。
下方內建 Holy Grail、Dashboard 12-col 等範本,可一鍵套用。
右側即時預覽 + 一鍵複製 CSS,直接貼進你的 Tailwind / CSS module。

Tips

gap 用 rem 不用 px,跟 root font-size 一起縮放對 RWD 友善。
named areas 比 grid-column-start/end 好讀,維護成本低很多。

CSS Grid 視覺化產生器

相關工具