可以操作哪些 Grid 屬性？

可以視覺化設定 grid-template-columns、grid-template-rows、gap 等。

支援 fr 單位嗎？

支援。可以使用 fr、px、% 等單位。

可以。複製程式碼直接貼到 CSS 檔案中使用。

所有處理均在瀏覽器中完成，不會將資料傳送至伺服器。

視覺化編輯器可設定欄與列，生成的 CSS 包含 grid-template-columns 和 grid-template-rows。命名區域的設定可透過手動編輯輸出 CSS 來完成。

設定列數、行數和間距，視覺化建立格線版面。支援 fr/px/auto 等單位。

columnTemplate

rowTemplate

gap8px

preview

columnTemplate

1fr 1fr 1fr

rowTemplate

1fr 1fr

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

可以操作哪些 Grid 屬性？: 可以視覺化設定 grid-template-columns、grid-template-rows、gap 等。
支援 fr 單位嗎？: 支援。可以使用 fr、px、% 等單位。
生成的 CSS 可以直接使用嗎？: 可以。複製程式碼直接貼到 CSS 檔案中使用。
資料會傳送至伺服器嗎？: 所有處理均在瀏覽器中完成，不會將資料傳送至伺服器。
可以設定 grid-template-areas 嗎？: 視覺化編輯器可設定欄與列，生成的 CSS 包含 grid-template-columns 和 grid-template-rows。命名區域的設定可透過手動編輯輸出 CSS 來完成。

最後更新：2026-02-21