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 讓項目跨多列或多行。也可以使用命名的網格區域建立複雜版面配置。