CSS Grid 產生器
免費線上 CSS Grid 版面配置產生工具，視覺化編輯
CSS Grid 版面配置基礎
CSS Grid 是用於在行和列中排列元素的二維版面配置系統。關鍵屬性：grid-template-columns 定義列軌道，grid-template-rows 定義行軌道，gap 控制間距，grid-area 定位項目。Grid 擅長頁面級版面配置。
如何使用網格產生器
設定列數和行數。預覽顯示網格版面配置。調整大小和間距。複製產生的 CSS 程式碼用於你的專案。
▶何時應該使用 Grid 而非 Flexbox？
Grid 用於二維版面配置（同時需要行和列）。Flexbox 用於一維版面配置（只需行或列）。Grid 更適合頁面版面配置；Flexbox 更適合元件版面配置。
▶CSS Grid 中的 fr 單位是什麼？
fr（分數）是分配剩餘空間的彈性單位。grid-template-columns: 1fr 2fr 讓第二欄獲得第一欄兩倍的空間。類似於 Flexbox 中的 flex-grow。
▶Grid 項目可以跨越多個儲存格嗎？
可以。使用 grid-column: span 2 或 grid-row: span 2 讓項目跨多列或多行。也可以使用命名的網格區域建立複雜版面配置。