CSS Grid 生成器
可視化設計 CSS Grid 佈局——調整列、行和間距，點擊單元格創建區域，複製生成的代碼
網格預覽
1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
生成的 CSS
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}如何使用 CSS Grid 生成器
CSS Grid 是 CSS 中最強大的佈局系統。我們的可視化生成器讓你通過調整參數和點擊單元格來設計複雜的網格佈局，然後將生成的代碼直接複製到項目中。
1
設置列和行
選擇網格需要的列數和行數。使用數字輸入框調整網格結構。
2
配置尺寸和間距
使用任意 CSS 單位（fr、px、%、auto 等）定義列寬和行高。設置單元格之間的間距。
3
點擊選擇區域
點擊單個單元格將其標記為命名網格區域。每個選中的單元格都會在生成的 CSS 中成為獨立的區域。
4
複製代碼
點擊"複製代碼"按鈕獲取生成的 CSS。粘貼到樣式表中即可開始構建佈局。
為什麼使用我們的 CSS Grid 生成器
不再手寫 Grid 代碼。我們的可視化工具讓你輕鬆設計、預覽和導出完美的 CSS Grid 佈局。
可視化點擊操作
實時查看網格效果。點擊單元格定義區域，CSS 即時更新——無需猜測。
支持所有 CSS 單位
列、行和間距支持任意有效的 CSS 單位——fr、px、%、em、auto、minmax()、repeat() 等。
網格區域命名
點擊單元格創建命名的網格區域。生成器產生清晰的 grid-template-areas 代碼，易於閱讀和維護。
一鍵複製
一鍵複製可直接使用的 CSS 代碼。無需格式化——直接粘貼到項目中。
常見問題
CSS Grid 是 CSS 中的二維佈局系統，可以同時按行和列排列元素。它是目前最強大的 CSS 佈局工具，非常適合複雜的頁面結構。
grid-template-areas 讓你可以為網格區域命名，然後將元素分配到這些名稱。它使佈局代碼更易讀：不需要計算行列號，直接引用如 'header'、'sidebar' 或 'main' 等區域名稱。
支持所有有效的 CSS 單位：fr（分數單位）、px、%、em、rem、auto、minmax()、repeat() 等。fr 單位在網格中最常用，因為它按比例分配可用空間。
是的，我們的 CSS Grid 生成器完全免費。無需註冊，沒有使用限制——設計任意數量的網格佈局。