CSS Grid 產生器

以視覺方式建立 CSS Grid 版面，並複製精簡的 CSS 與 HTML

預覽

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

欄間距16px

列間距16px

在預覽中選取一個項目，即可設定它跨越的欄數與列數。

項目水平對齊

項目垂直對齊

進階

軌道水平對齊

軌道垂直對齊

最小高度

0 表示不設定 min-height。fr 列需要高度才能填滿。

編輯時預覽與程式碼會同步更新。

什麼是 CSS Grid 產生器？

一個以視覺方式建立 CSS Grid 版面的工具。可用 fr、px、%、auto、minmax() 或經過驗證的自訂值設定欄與列的尺寸，塗出命名區域，或建立 auto-fit 響應式卡片格線。預覽是真正的 CSS Grid 容器，使用與產生程式碼相同的宣告，所見即所得。

使用方式

命名區域與驗證

每個命名區域都必須是完整的矩形，否則瀏覽器會忽略整條 grid-template-areas 宣告。本工具會說明哪個區域違反規則，並在修正前讓預覽與程式碼保留上一次有效的版面。自訂軌道尺寸會在套用前先經過驗證。

限制

最多 12 欄、12 列與 48 個項目。自訂尺寸支援長度、百分比、fr、auto、min-content、max-content、minmax() 與 fit-content()；不支援 calc()、var()、格線名稱以及單一軌道內的 repeat()。版面只會儲存在這個瀏覽器中。