CSS Grid 網格產生器與 css grid minmax 設定
這款免費的網格繪製工具能讓你透過視覺化拉選的方式迅速規劃網格。無論你需要調整 欄、列 還是 間距，都能在瀏覽器中直接完成並複製對應的 CSS 與 HTML 程式碼。所有運算都在你的電腦中處理，無需上傳任何資料或註冊帳號。
css grid 教學：視覺化劃分區域與操作步驟
使用此工具規劃網格非常簡單，只需按照以下步驟操作：
- 拖動 欄 與 列 的滑桿（範圍為 1 至 24），並設定所需的 間距（0 至 128px）。
- 在網格上按住並拖曳至對角，釋放後即可將選取的格子合併為單一區域。
- 在 區域 列表中將預設名稱修改為符合語意的命名（如 header 或 sidebar）。
- 點擊 CSS 或 HTML 區塊中的 複製 按鈕，將程式碼貼入你的專案。
css grid minmax 語法與軌道尺寸設定
開啟 進階尺寸設定 後，你可以針對每一欄與每一列單獨指定軌道大小。除了常用的 1fr、240px 與 25%，也能精確套用 css grid minmax 語法，例如輸入 minmax(100px, 1fr) 來確保欄位擁有最小寬度，同時能隨螢幕彈性擴展。
若輸入的 CSS 語法不符合規範，該輸入框會顯示紅框警告，系統會自動改用 1fr，確保產出的程式碼永遠有效。
軌道尺寸單位：fr、minmax() 與 fit-content()
除了 minmax 之外，在進階欄位中你也可以套用 fit-content(300px)、auto、min-content 或 max-content 等彈性單位。這讓你在設計複合式配置時，不必手動計算複雜的邊界與比例。
繪製區域時必須為矩形且不可重疊。如果不小心拉到重疊區域，框線會變紅並取消該次操作；若要重新規劃，點擊垃圾桶圖示刪除該區域即可釋放網格。
打造彈性與響應式配置
本工具產出的程式碼為純粹的 CSS 與 HTML，不依賴任何外部框架。預設的欄位使用 repeat(3, 1fr) 來平均分配空間。
要讓配置具備響應式效果，建議在 進階尺寸設定 中搭配 fr 與 minmax()，並在媒體查詢中重新定義 grid-template-areas，即可在行動裝置螢幕上輕鬆將多欄佈局改為單欄排列。
常見問題
css grid minmax 的作用是什麼？
minmax(min, max) 可以限制網格軌道的最小與最大尺寸。例如 minmax(100px, 1fr) 代表該欄最小不低於 100px，剩餘空間充足時則會隨 1fr 彈性分配。你可以在「進階尺寸設定」中直接輸入此語法。
如何選擇 fr、minmax() 與 fit-content() 這些尺寸單位？
fr 用於按比例分配剩餘空間，minmax() 用於設定上下限範圍，而 fit-content() 則會在不超過指定上限的前提下根據內容調整大小。本工具的「進階尺寸設定」支援輸入這些單位並即時產生程式碼。
這個網格工具會上傳我的資料嗎？
不會。本工具完全在你的瀏覽器中執行，所有網格繪製與程式碼產生都在本地完成，不需要登入帳號，也不會上傳任何資料。
如何為網格區域命名？
劃分出區域後，可在「區域」列表中修改名稱。名稱會自動過濾為合法的 CSS 格式，僅保留小寫英文字母、數字、連字號與底線，並以字母開頭。
間距設定是如何運作的？
滑桿所設定的「間距」會對應到容器的 gap 屬性，同時作用於欄與列之間。畫面上為了方便繪製會維持適當視覺距離，產生的 CSS 程式碼則會寫入你設定的真實像素值。
產生的程式碼包含哪些內容？
點擊「CSS」會複製包含 display: grid、grid-template-areas 以及各區域 grid-area 的完整樣式；點擊「HTML」則會複製對應的容器與子元素 HTML 標籤。
