CSS 排版工具
CSS Grid Generator
透過互動式視覺化介面，輕鬆建立 CSS Grid 版面配置。
即時預覽、產出 CSS 與 HTML，所有操作純前端執行。
Grid Container
快速建立
grid-template-columns
grid-template-rows
Gap
justify-content
align-content
justify-items
align-items
Grid Items 編輯
版面 Presets
即時預覽
1
2
3
4
display: grid;\ngrid-template-columns: 1fr 1fr;\ngrid-template-rows: auto auto;\njustify-content: start;\nalign-content: stretch;\ngap: 8px;
功能特色
Grid Container 完整設定
Columns / Rows 控制
Justify / Align 對齊
Gap 間距控制
Item 個別 Grid 定位
即時預覽
產生 CSS 與 HTML
20+ Presets
一鍵複製程式碼
響應式預覽
復原 / 重做
純前端離線執行
CSS Grid 教學
CSS Grid Layout 是 CSS 最強大的二維版面配置系統，可同時控制行與列的排列，輕鬆建立複雜的網頁版面。
Container 屬性
grid-template-columns— 定義欄位grid-template-rows— 定義列gap— 網格間距justify-content— 水平對齊align-content— 垂直對齊justify-items— Item 水平對齊align-items— Item 垂直對齊
Item 屬性
grid-column-start/end— 欄位範圍grid-row-start/end— 列範圍grid-area— 簡寫定位justify-self— 個別水平對齊align-self— 個別垂直對齊
常見 Grid 範例
Dashboard 儀表板
Holy Grail 經典三行
圖片畫廊
側邊欄版面
Cards 網格
雜誌風格
常見問題
CSS Grid 和 Flexbox 有什麼不同？
CSS Grid 是 二維 版面配置系統，可同時控制行與列；而 Flexbox 是 一維 配置，僅在一個方向上排列項目。Grid 適合整體頁面佈局（如 Dashboard、Holy Grail），Flexbox 適合元件級別的排列（如導覽列、卡片列表）。兩者經常搭配使用。
什麼是 fr 單位？
fr（fraction）是 CSS Grid 專用的彈性單位，代表分配剩餘空間的比例。例如 grid-template-columns: 1fr 2fr 表示第二欄的寬度是第一欄的兩倍。fr 單位讓 Grid 版面具有真正的彈性。如何讓 Item 跨越多欄或多列？
使用
grid-column 和 grid-row 屬性。例如 grid-column: 1 / 3 讓 Item 從第一欄延伸到第三欄（跨兩欄）。span 關鍵字也可用：grid-column: span 2 表示跨兩欄。repeat() 函數怎麼用？
repeat() 是 Grid 的簡寫函數，repeat(3, 1fr) 等同於 1fr 1fr 1fr。也支援 auto-fill 和 auto-fit 關鍵字，用於建立自動適應容器寬度的響應式網格。這個工具是免費的嗎？
是的，完全免費，無需註冊。所有處理都在您的瀏覽器中本地執行 — 不會傳送任何資料到伺服器，您的版面設定絕不外流。
瀏覽器相容性
Chrome 57+
Firefox 52+
Safari 10.1+
Edge 16+
Opera 44+
iOS Safari 10.3+
Android 67+
IE 11+ (prefix)
隱私說明
此工具完全在您的瀏覽器中執行。您建立的任何版面、Grid Item 設定或樣式都不會傳送到任何伺服器。所有工作都留在您的裝置上。我們不會對這個工具使用 Cookie 或追蹤功能。