視覺化設計 CSS Grid 版面
CSS Grid 版面產生器提供直覺的視覺化介面，協助開發者快速規劃網格系統。使用者可透過設定欄數與列數，定義各軌道的尺寸以及網格間距，並直接在網格畫布上拖曳選取區域來放置項目。系統會根據設計結果，即時產生對應的 CSS 與 HTML 程式碼，供開發者複製並應用於專案中。
本工具的參數限制與輸入範圍如下：
- 欄數：可設定 1 至 12 欄。
- 列數：可設定 1 至 12 列。
- 欄間距：可設定 0 至 48px。
- 列間距：可設定 0 至 48px。
- 欄尺寸與列尺寸：支援任何合法的 CSS Grid 數值，例如
1fr、200px、auto、min-content或minmax(120px, 1fr)。 - 項目放置：在網格單元格上拖曳以標記出矩形區域。
網格軌道尺寸與 repeat() 語法優化
在設定欄尺寸與列尺寸時，每條軌道皆有獨立的輸入框，可輸入不同的 CSS 網格長度單位。若輸入無效的值（例如 not-a-grid-track），該輸入框會被標記為無效狀態，但產生的 CSS 程式碼仍會保留上一次有效的設定值。
為了保持程式碼簡潔，當多個連續軌道擁有相同的尺寸時，產生的 CSS 會自動將這些軌道合併為 repeat() 語法。例如，若設定三個連續的 1fr 欄寬，輸出時會自動摺疊為 repeat(3, 1fr)。
網格間距與合併規則
欄間距與列間距可獨立進行設定。在產生的 CSS 程式碼中，若欄間距與列間距的數值不相同，會分別輸出為 column-gap 與 row-gap 屬性。一旦兩者的數值設定為相同大小，產生器會自動將其合併為單一的 gap 屬性，以精簡程式碼結構。
項目放置與重疊機制
在網格畫布上按住滑鼠並拖曳，即可框選出一個矩形區域。放開滑鼠後，該區域即建立為一個子項目，並橫跨所選的欄與列。
- 項目上限：本工具最多支援建立 16 個項目。
- 重疊行為：項目之間允許重疊，後繪製的項目會疊加在先繪製的項目上方。
- 刪除項目：點擊項目上的「×」按鈕即可將其移除。
- 清空項目：使用「清空項目」功能會將所有項目清除，此時 HTML 容器內將無任何子元素，項目計數歸零。
- 新增項目：點擊「新增項目」按鈕可直接產生對應的 HTML 項目元素。
預設版面配置
為了加速開發流程，工具內建了四種常見的網格版面預設樣式：
- 側邊欄
- 頁首頁尾
- 畫廊：此預設樣式會自動生成 3 欄、2 列以及 3 個項目。
- 儀表板
瀏覽器端本地處理與隱私
本工具的所有網格規劃與程式碼產生程序，完全在您的瀏覽器本機端完成。您在介面上進行的任何參數設定、軌道尺寸或項目配置，皆不會上傳到 BroBroGo 伺服器，確保資料處理的隱私性。
常見問題
怎麼在網格上放置項目?
在格子上按住並拖曳，框出一塊矩形區域，放開後它就成為一個橫跨這些欄和列的子項。你畫的每個項目都會在 CSS 裡產生自己的 grid-column 和 grid-row 規則，並在 HTML 裡對應一個 div。項目可以重疊,後畫的蓋在上面;點項目上的 × 就能刪除。
欄和列可以設成不同尺寸嗎?
可以。每條軌道都有自己的尺寸輸入框,你可以填任意 grid 取值——1fr、200px、auto、min-content 或 minmax(120px, 1fr)。尺寸相同的軌道會摺疊成 repeat(),讓輸出更簡潔。欄間距和列間距各自設定,兩者相同時會合併成一個 gap。
產生的程式碼怎麼用?
把 CSS 和 HTML 一起複製走。HTML 給你一個容器,裡面每個項目一個 div;CSS 定義網格並替每個項目定位。兩段都貼進你的專案,就能還原你在這裡畫的版面。