設計

CSS Grid 產生器

視覺化產生 Grid 版面 CSS。

佈局預設 (10)

拖曳經過儲存格即可繪製矩形,也可逐格點選。每個命名區域都必須保持矩形。

即時預覽

建立具名區域的 CSS 網格

為 template-areas 繪製字母格線,或選擇預設。預覽以不同色調顯示各個區域。

常見問題

什麼是 grid-template-areas?

一種為版面區域(header、sidebar、main…)命名,並依名稱而非格線編號放置項目的方式。點選下方儲存格來繪製區域字母,CSS 會即時更新。

可以從預設開始嗎?

可以——十種版面配置預設(包括 Holy grail、dashboard、magazine 與 app shell)可一鍵載入命名區域。

會上傳任何東西嗎?

不會。CSS 完全在你的瀏覽器中產生。

最後更新日期: