CSS Grid 版面產生器
設好欄和列,在格子上拖出區域來放置項目,網格 CSS 連同對應的 HTML 一鍵複製。
網格都在你的瀏覽器裡產生,這裡設定的內容不會上傳到 BroBroGo。
常見問題
怎麼在網格上放置項目?
在格子上按住並拖曳,框出一塊矩形區域,放開後它就成為一個橫跨這些欄和列的子項。你畫的每個項目都會在 CSS 裡產生自己的 grid-column 和 grid-row 規則,並在 HTML 裡對應一個 div。項目可以重疊,後畫的蓋在上面;點項目上的 × 就能刪除。
欄和列可以設成不同尺寸嗎?
可以。每條軌道都有自己的尺寸輸入框,你可以填任意 grid 取值——1fr、200px、auto、min-content 或 minmax(120px, 1fr)。尺寸相同的軌道會摺疊成 repeat(),讓輸出更簡潔。欄間距和列間距各自設定,兩者相同時會合併成一個 gap。
產生的程式碼怎麼用?
把 CSS 和 HTML 一起複製走。HTML 給你一個容器,裡面每個項目一個 div;CSS 定義網格並替每個項目定位。兩段都貼進你的專案,就能還原你在這裡畫的版面。