CSS Grid 版面產生器

視覺化設計 CSS Grid 版面

CSS Grid 版面產生器是一個網頁端視覺化設計工具，旨在協助開發者快速規劃網格系統。透過直觀的介面，你可以自由設定網格的欄數、列數、尺寸以及間距，並直接在網格上拖曳規劃子項目的分佈。工具會即時產生對應的 CSS 與 HTML 程式碼，供你複製並應用於實際專案中。

網格的建構與運算完全在你的瀏覽器裏產生，這裡設定的內容不會上傳到 BroBroGo。

在開始規劃版面之前，你需要先定義網格的基本結構。工具支援以下參數設定：

欄數：可設定 1 至 12 之間的整數。
列數：可設定 1 至 12 之間的整數。
欄間距：可設定 0 至 48px 之間的數值。
列間距：可設定 0 至 48px 之間的數值。
欄尺寸與列尺寸：每條軌道（欄或列）均設有獨立的尺寸輸入框。你可以輸入任何合法的 CSS Grid 數值，例如 1fr、200px、auto、min-content 或 minmax(120px, 1fr)。

若在尺寸輸入框中輸入了不合法的數值（例如 not-a-grid-track），該輸入框會被標記為無效，但產生的 CSS 程式碼仍會保留上一次有效的數值。

在網格結構建立後，你可以透過以下方式規劃子項目：

拖曳繪製：在網格格子上按住並拖曳，框出一塊矩形區域，放開滑鼠後即可建立一個橫跨這些欄和列的子項目。
項目上限：工具最多支援建立 16 個項目。
重疊機制：繪製的項目允許相互重疊，後繪製的項目會疊在先前的項目之上。
手動控制：點按項目上的「×」圖示可刪除該項目。此外，點按「新增項目」會產生一個 HTML 項目，而點按「清空項目」則會清除所有已繪製的項目，使 HTML 容器回復為空，項目計數歸零。

當你調整網格或放置項目時，工具會同步輸出 CSS 與 HTML 程式碼：

軌道合併 repeat()：若相鄰的軌道（欄或列）擁有相同的尺寸，輸出的 CSS 會自動將其摺疊合併為 repeat() 語法，以簡化程式碼。
間距合併 gap：欄間距與列間距在設定時是獨立的，但若兩者數值相同，輸出的 CSS 會自動將 column-gap 與 row-gap 合併為單一的 gap 屬性。
項目定位：每個繪製的項目都會在 CSS 中獲得專屬的 grid-column 與 grid-row 定位規則，並在 HTML 中對應產生一個 div 元素。

為了加速開發流程，工具提供了四種常見的版面預設結構：

在格子上按住並拖曳，框出一塊矩形區域——放開後它就成為一個橫跨這些欄和列的子項。你畫的每個項目都會在 CSS 裏產生自己的 grid-column 和 grid-row 規則，並在 HTML 裏對應一個 div。項目可以重疊，後畫的蓋在上面；點按項目上的 × 就能刪除。

可以。每條軌道都有自己的尺寸輸入框，你可以填寫任意 grid 取值——1fr、200px、auto、min-content 或 minmax(120px, 1fr)。尺寸相同的軌道會摺疊成 repeat()，讓輸出更簡潔。欄間距和列間距各自設定，兩者相同時會合併成一個 gap。

把 CSS 和 HTML 一起複製走。HTML 給你一個容器，裏面每個項目一個 div；CSS 定義網格並替每個項目定位。兩段都貼進你的專案，就能還原你在這裡畫的版面。