✨ CSS Grid Layout Generator

Build a CSS Grid layout by setting columns, track sizing, gaps and breakpoints, then copy the generated CSS and HTML.

📐 計算公式 / 原理

grid-template-columns: repeat(n, 1fr | <固定寬度> | auto)；gap: <行間距> <列間距>

把列數、列寬方式（固定 / fr / auto）、gap 與斷點拼裝為 CSS Grid 宣告及對應 HTML，即時預覽並複製；用於二維佈局搭建。

列數

間距（px）

列寬方式

容器寬度（px）

📚 深度解析：Grid 網格佈局生成器

生成 3 列自適應網格

輸入：列 repeat(3,1fr)、間距 16px。處理：輸出 grid 模板。輸出：display:grid;… 程式碼與預覽。

1fr 是什麼？: 剩餘空間的一份，配合 repeat 可自適應列寬。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
生成的程式碼/圖片能直接用嗎？: 可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

⚠️ 使用說明與注意事項