什麼是 CSS Grid 產生器？
免費線上 CSS Grid 產生器。透過視覺化編輯器建立與調整 CSS Grid 佈局。
CSS Grid 是功能強大的 2D 版面系統，可同時將內容排列為列與欄，非常適合複雜的頁面版面、儀表板與響應式設計。CSS Grid 產生器提供視覺化介面來建立網格版面，無需手寫 CSS，並附有即時預覽，隨您調整設定即時更新。
使用滑桿設定欄數（1–12）與列數（1–12）。每個組合都會立即顯示即時預覽，以編號儲存格代表您的網格項目。欄距與列距控制可讓您調整網格儲存格之間的間距，範圍從 0 到 50 像素。調整這些數值，觀察預覽中的儲存格隨之展開或收緊。
對齊控制可設定 justify-items（每個儲存格內的水平對齊）與 align-items（每個儲存格內的垂直對齊）。選項包括 start、end、center、stretch 與 baseline。這些屬性控制內容在每個網格儲存格內的定位方式——例如，在儀表板卡片的網格區域內將文字同時水平與垂直置中。
產生的 CSS 輸出包含 grid-template-columns、grid-template-rows、gap、justify-items 與 align-items 屬性，可直接複製使用。預覽使用編號儲存格，方便您核對列數與欄數是否符合預期的版面。CSS Grid 獲得所有現代瀏覽器支援，是 2D 頁面版面的推薦做法，取代了 float 版面與複雜的 flexbox 巢狀結構等舊方法。