CSS Grid 佈局遊樂場
免費線上 CSS Grid 佈局遊樂場與產生器。編輯欄列軌道（fr、px、auto、minmax），沿著編號格線放置子項跨欄跨列，再複製 CSS。
CSS Grid 佈局遊樂場
免費線上 CSS Grid 佈局遊樂場與產生器。編輯欄列軌道（fr、px、auto、minmax），沿著編號格線放置子項跨欄跨列，再複製 CSS。
關於 CSS Grid 佈局
用畫面建立欄與列
Grid 容器用 grid-template-columns 與 grid-template-rows 定義欄、列軌道。輸入 1fr 2fr 120px 或 minmax(120px, 1fr) 等值，再調整 gap 與子項對齊，預覽就會同步更新。想從可用版型開始時，可載入聖杯佈局或卡片牆範例再修改。
軌道是空間，格線是邊界
3 條欄軌道會形成 4 條有編號的欄格線，因為每條軌道兩側都需要邊界。因此 grid-column: 1 / 3 是從第 1 條線開始、跨過前 2 條軌道，在第 3 條線停止。預覽周圍的編號圓點會讓這種以線定位的方式直接可見。
放置每個子項並複製 CSS
選取子盒後，可設定它的 grid-column 與 grid-row 起迄線，再用 justify-self 或 align-self 調整單一子項的對齊。每次有效變更都會同步產生可複製的 CSS。目前版本聚焦明確軌道與格線定位，因此不接受 repeat()、auto-fill、auto-fit、subgrid 或具名 grid-template-areas。
常見問題
關於這個主題的常見疑問與實用解答。
這個 CSS Grid 產生器可以做什麼？
可定義欄列軌道、調整 gap 與對齊、新增子盒、把每個子盒放到指定格線之間、即時預覽版型，並複製容器與子項的 CSS。內建範例可作為常見版型的快速起點。
grid-column: 1 / 3 是什麼意思？
它會讓子項從第 1 條欄格線延伸到第 3 條欄格線，因此跨過兩條線之間的 2 條軌道。這些數字指的是格線編號，不是要佔幾欄。
CSS Grid 的 fr、auto 與 minmax() 是什麼？
fr 會把剩餘空間分成彈性比例；auto 依內容與可用空間決定軌道大小；minmax(最小值, 最大值) 為軌道設定尺寸上下限。本編輯器也接受 120px 這類固定像素軌道。
什麼時候該用 CSS Grid，而不是 Flexbox？
當列與欄需要一起構成二維版型，例如頁面骨架或卡片矩陣時，適合使用 Grid。只有單一列或單一欄時，Flexbox 通常更簡單。兩者可以搭配使用，Grid 子項本身也能是 Flex 容器。
這個遊樂場支援 repeat()、auto-fit、subgrid 或具名 Grid 區域嗎？
目前不支援。軌道編輯器接受明確的 fr、px、auto 與 minmax() 值，讓編號格線維持可預期。repeat()、auto-fill、auto-fit、subgrid 與 grid-template-areas 不在目前版本範圍內。