CSS Grid 產生器

什麼是 CSS Grid？

CSS Grid 是一個強大的二維佈局系統，用於創建複雜的網頁版型。與 Flexbox 不同，Grid 可以同時控制行和列，使設計師能夠輕鬆創建響應式和精確的佈局。無論是簡單的卡片網格還是複雜的儀表板設計，CSS Grid 都能提供精確的控制力。

如何使用這個產生器？

1. 在「欄位」欄位輸入列數或 CSS 值（如 1fr 2fr 1fr 表示三列，其中第二列佔用兩倍寬度）
2. 在「列」欄位輸入行數或 CSS 值（如 auto 200px 表示第一行自動高度，第二行固定 200 像素）
3. 在「間距」設定儲存格之間的距離，如 20px
4. 點擊「產生 Grid」查看實時預覽
5. 在預覽中點擊任何儲存格編輯其欄位跨度、列跨度和起始位置
6. 生成的 CSS 程式碼會自動更新，複製後直接用於您的項目

常見使用案例

頁面佈局：創建典型的網頁結構，包括頂部導航、側邊欄、主內容區域和頁腳。Grid 的二維控制使得複雜的頁面佈局變得簡單明了。

產品網格：電商網站的產品展示、作品集的圖片網格。使用 Grid 可以輕鬆調整列數以適應不同的螢幕尺寸。

儀表板：數據可視化儀表板中的統計卡片、圖表和指標，每個元素精確對齐。

表單佈局：複雜的多欄位表單設計，使用 Grid 可以實現精確的標籤和輸入框對齐。

CSS Grid 和 Flexbox 有什麼區別？

Flexbox 是一維佈局系統，主要用於在一行或一列中對齐元素。而 CSS Grid 是二維的，可以同時控制行和列。Grid 更適合整體頁面佈局，Flexbox 更適合組件內部的元素排列。

我可以設定個別儲存格的樣式嗎？

是的，產生器為每個儲存格生成獨立的 CSS 選擇器（.cell-1、.cell-2 等），您可以為每個儲存格設定不同的背景色、內邊距、邊框等樣式。

什麼是 fr 單位？fr 是如何計算的？

「fr」代表「分數單位」（fractional unit），用於在 Grid 中分配可用空間。例如 1fr 2fr 1fr 表示三個欄位分別佔用 1、2、1 份的可用空間。如果每份是 100px，則三欄寬度分別為 100px、200px、100px。

CSS Grid 適合行動裝置設計嗎？

完全適合。CSS Grid 非常適合響應式設計。您可以使用媒體查詢在不同螢幕尺寸上改變欄位數量和行高，例如在手機上顯示一列，平板上顯示兩列，桌面上顯示四列。

如何在 Grid 中合併多個儲存格？

在產生器預覽中點擊儲存格，設定「欄位跨度」和「列跨度」值。例如，設定欄位跨度為 2 表示該儲存格佔用 2 列，系統自動生成 grid-column: 1 / span 2 這樣的 CSS。

生成的 CSS 代碼可以直接使用嗎？

是的，完全可以。複製生成的 CSS 程式碼後，貼到您的樣式表中。然後在 HTML 中使用 class="container" 作為容器，內部元素使用 class="cell-1"、class="cell-2" 等類名即可。