CSS网格生成器

CSS Grid 版面配置是一個強大的二維版面配置系統，允許你同時在列和行中排列元素。與一次只處理一個方向的 Flexbox 不同，Grid 讓你對兩個軸擁有完全控制。關鍵屬性包括 grid-template-columns 定義列軌道、grid-template-rows 定義行軌道、gap 控制間距、grid-area 在命名區域內定位專案。

使用列數滑桿設定列數（1 到 12）。使用行數滑桿設定行數（1 到 12）。調整間距滑桿控制儲存格之間的間距（0 到 32px）。預覽區域顯示帶有編號儲存格的即時網格。滿意後，複製產生的 CSS 程式碼並貼到你的專案中。

grid-template-columns 和 grid-template-rows 定義軌道大小。repeat() 函式建立等寬軌道，例如 repeat(3, 1fr) 建立三個等寬列。fr 單位按比例分配可用空間。gap 設定列和行之間的間距。如果需要，可以為 row-gap 和 column-gap 設定不同的值。

聖杯版面配置：三列標頭、帶側邊欄的主內容區。儀表板卡片：repeat(auto-fill, minmax(250px, 1fr)) 建立響應式卡片網格。全寬首屏加下方內容：一列跨越所有行。雜誌版面配置：使用 grid-column 和 grid-row 混合跨度實現不同儲存格尺寸。

使用 auto-fill 或 auto-fit 配合 minmax() 建立無需媒體查詢的自適應響應式網格。結合 clamp() 實現靈活尺寸。使用 minmax(200px, 1fr) 設定最小寬度，防止專案收縮過小。使用媒體查詢在斷點處更改列數。考慮使用容器查詢實現元件級響應式。