使用說明
等寬模式用 `repeat(n, 1fr)` 平均分配欄位；自動換行模式用 `repeat(auto-fit, minmax(...))` 做出不寫 media query 也會自己折行的響應式網格；自訂模式則讓你直接輸入像 `1fr 2fr 1fr` 的軌道清單。輸入的軌道清單會被重新解析成數值與單位再組回去，不合法的部分會自動忽略。
CSS / FRONTEND · 瀏覽器內處理
CSS Grid 版面產生
設定欄列數、間距與對齊，即時預覽並輸出 grid CSS。
預覽最多 12 欄 12 列。支援等寬、自動換行與自訂軌道三種欄位模式。
1
2
3
4
5
6
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 12px;
justify-items: stretch;
align-items: stretch;
}欄位設定
欄位模式
間距與對齊
操作步驟
- 選擇等寬、自動換行或自訂軌道模式。
- 設定欄數、列數與行列間距。
- 調整項目對齊方式後複製 grid CSS。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- auto-fit 和 auto-fill 差在哪？
- 兩者都會自動決定欄數。auto-fill 會保留空的軌道，auto-fit 則把空軌道收合，讓現有項目撐滿整列。想讓少量項目也填滿寬度時用 auto-fit，想維持固定欄寬時用 auto-fill。
- 1fr 和 auto 有什麼不同？
- fr 分配的是剩餘空間，1fr 會拿走等份的剩餘寬度而不管內容多長；auto 則以內容寬度為準。想要欄寬一致就用 fr，想讓欄位貼合內容就用 auto。