CSS Grid 遊樂場
視覺化組合 CSS Grid 範本、間距與配置，然後複製佈局 CSS。
預覽
點擊格線中已編號的項目即可選取並重新定位。
grid-template-columns
—
grid-template-rows
—
產生的 CSS
—
—
欄
列
間距
對齊
16px
16px
格線項目
項目 1
尚無項目。新增項目即可放置於格線上。
預設關於 CSS Grid 遊樂場
CSS Grid 練習場能以視覺化方式組合出真正的網格版面。新增或移除欄軌與列軌來塑造 grid-template-columns 與 grid-template-rows，設定欄距與列距，並調整全部四個對齊屬性——justify-items、align-items、justify-content 與 align-content——預覽畫面會即時反映每一項變更。
項目放置正是網格威力所在：新增項目，在預覽中點選一個以選取它，再用 column start、column span、row start 與 row span 來定位。這正是側欄、頁首與特色區塊能跨越多個軌道的技巧——幾乎所有實際網格版面背後都靠它。
三種預設——聖杯版面、儀表板與相片庫——會載入經典頁面結構，供你拆解與調整。版面滿意後，複製產生的 CSS，其中包含完整的網格容器規則與每個項目的定位設定。
如何使用 CSS Grid 遊樂場
- 新增或移除欄軌與列軌以定義網格範本。
- 設定欄距與列距。
- 調整對齊控制項：justify-items、align-items、justify-content 與 align-content。
- 新增項目，在預覽中點選其一，設定其欄/列起點與跨距來放置它。
- 載入聖杯版面、儀表板或相片庫預設，研究經典版面結構。
- 將產生的 CSS 複製到你的樣式表中。
常見問題
justify-items 是在各自的網格儲存格內對齊每個項目；justify-content 則是在軌道未填滿容器時，對齊整個網格在容器內的位置。垂直方向上 align-items 與 align-content 也是同樣的差異。
選取該項目並增加其欄跨距——CSS 輸出會使用帶有 span 值的 grid-column。搭配列跨距，你就能在同一個網格中打造頁首橫幅、側欄與大型特色區塊。
這是經典的頁面骨架：全寬頁首與頁尾，中間夾著三欄——導覽列、主要內容與側邊欄。過去用浮動（float）實作出了名地麻煩；此預設示範了幾個網格定位就能俐落解決。
Grid 擅長需要列與欄同時對齊的二維版面——頁面骨架、儀表板、相片庫。Flexbox 則最適合工具列與選單這類一維流向。兩者可以搭配使用：頁面用網格、元件內部用 flex。
是的，它免費且完全在瀏覽器中運作——你可以盡情試驗，你建立的內容不會離開你的裝置。
熱門搜尋
css grid 產生器
css grid 遊樂場
grid-template-columns 產生器
css grid 佈局產生器
grid-template-areas 建構工具
css grid 間距工具
css grid 視覺化工具
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。