CSS Grid 實驗場
新調整 grid 欄數、間距與對齊並即時預覽，附 CSS。
Identical neighbouring tracks collapse into repeat() automatically.
Runs entirely in your browser. Nothing is uploaded.
互動式 CSS Grid 產生器與練習場
這款 CSS Grid 產生器將抽象的網格語法轉化為可視化、可拖曳的操作介面。設定欄數與列數，即時預覽版型變化，滿意後直接複製乾淨的 CSS、Tailwind 或 HTML 程式碼。無需安裝任何軟體，也不需要建立帳號——整個 CSS Grid 練習場完全在瀏覽器中運行，你設計的版型不會被上傳到任何伺服器。
無論你是在學習 Grid 的運作原理、快速原型設計儀表板，還是想用純 CSS 重現 Bootstrap 的 12 欄格線系統，這裡幾秒鐘就能完成。Layoutit 只輸出 CSS 且缺乏項目級別編輯，Sarah Drasner 的 CSS Grid Generator 也沒有 Tailwind 或可分享連結——UtiloKit 將三種輸出格式加上命名區域支援整合在同一個介面中。
設定軌道：欄、列與單位
網格由軌道（track）定義。在「軌道」分頁中，依需求新增欄和列，並為每條軌道選擇單位：fr 代表彈性分割比例，px 或 % 為固定尺寸，auto 依內容自適應，minmax() 則讓軌道在最小值與最大值之間彈性伸縮。相鄰且相同的軌道會自動用 repeat() 簡化，三個等寬欄會輸出整潔的 repeat(3, 1fr)，而不是 1fr 1fr 1fr。
將欄數設為 12，就能得到經典 Bootstrap 風格的格線系統，完全是純 CSS。設定兩欄兩列，可快速建立 2x2 版面。grid-template-columns 與 grid-template-rows 的輸出會隨每次變更即時更新，讓你隨時看到版型對應的確切程式碼。
用 auto-fit 與 minmax() 實現響應式版型
響應式 CSS Grid 產生器模式會自動產生現代、無需 Media Query 的語法：repeat(auto-fit, minmax(200px, 1fr))。選擇 auto-fit 或 auto-fill，設定格子的最小寬度，預覽區會隨視窗縮放自動調整欄數——寬螢幕多欄、行動裝置則縮至單欄。這是建立流動式卡片排版最快的方式，無需撰寫任何 Media Query。
當格子數量少於容器可容納的欄數時，auto-fit 與 auto-fill 的差異就會顯現。auto-fit 會折疊空軌道，讓已有內容的項目撐滿空間；auto-fill 則保留空軌道，讓項目維持最小尺寸。這個練習場讓你即時切換兩者並觀察效果，這是靜態 CSS 教學文件做不到的事。
拖曳擺放項目，或用命名區域規劃版面
在「軌道」模式中，預覽區是可互動的：跨格拖曳以建立橫跨多格的項目，點選項目即可選取，並在側邊面板中精細調整 grid-column 與 grid-row 的起始位置和跨越數。這是理解跨格排版最直觀的方式——比讀文件快，也比在 CodePen 上實驗快。
偏好更易讀的方式？「區域」分頁使用 grid-template-areas——用命名列的方式勾勒版面，例如 'header header' 'sidebar main'，產生器會自動建立模板及每個區域對應的 grid-area 規則。非常適合建立含有頁首、側邊欄、主要內容與頁尾的經典頁面結構。Layoutit 雖有類似的區域編輯器，但無法為區域型版面輸出 Tailwind 程式碼。
複製 CSS、Tailwind 或 HTML，並用連結分享
每個版型均支援三種匯出方式。CSS 分頁提供容器規則與各項目規則；Tailwind CSS Grid 產生器分頁輸出對應的實用類別——grid grid-cols-3 gap-4、col-span-2，以及自訂軌道的任意值；HTML 分頁提供可直接貼上的標記語法。分享連結會將完整設定編碼進 URL，讓隊友開啟後看到完全相同的網格——無需帳號、無需匯出、無需截圖。
免費、私密、即時——無需上傳，無需帳號
無需註冊，無需下載任何東西。建立軌道、拖曳項目、切換響應式 auto-fit 模式，以及匯出程式碼，全部都在瀏覽器本地完成，你的作品永遠不會離開你的裝置。不同於 Figma 等網頁設計工具需要帳號並將作品儲存在雲端伺服器，這個 CSS Grid 練習場完全私密。將這個網格版面產生器加入書籤，每當需要建立、學習或複製 CSS Grid 時就打開它——在任何裝置上都能使用，包括 iPhone 和 Android。
Frequently asked questions
CSS Grid 是怎麼運作的？
CSS Grid 將元素變成二維版面配置。你在容器上設定 display: grid，再用 grid-template-columns 和 grid-template-rows 定義欄和列的軌道，瀏覽器就會將每個子元素放入對應的格子中。例如，grid-template-columns: repeat(3, 1fr) 會建立三個等寬欄，子元素從左到右、從上到下依序填入。與舊式的浮動或 Flexbox 版面不同，Grid 能同時控制列和欄，讓你從單一容器屬性掌控兩個軸向。
CSS 中的 grid 屬性要怎麼使用？
在容器上加入 display: grid，再描述其軌道。最基本只需一行：display: grid; grid-template-columns: 1fr 1fr; — 即可建立兩個等寬欄。接著可以加上 grid-template-rows 定義明確的列，用 gap 設定間距，再對特定項目使用 grid-column: span 2 讓它橫跨兩格。grid 簡寫屬性可以在一個宣告中整合列、欄和區域，但大多數開發者偏好分別設定 grid-template-columns、gap 和對齊方式，因為這樣可讀性更高。這個產生器會為你撰寫這些規則。
grid-template-columns 和 grid-template-rows 是什麼？
它們定義每個欄和列軌道的大小。grid-template-columns: 200px 1fr 1fr 會建立一個固定 200px 的第一欄和兩個彈性欄，平分剩餘空間。grid-template-rows: auto 1fr 設定第一列依內容自適應，第二列填滿剩餘高度。列表中的每個值代表一個軌道，值的數量決定網格有多少個明確的欄或列。這個產生器會在你新增和編輯軌道時同步建立這兩個列表，並即時更新預覽。
fr、repeat() 和 minmax() 各是什麼意思？
fr 是「分數」單位——它分割剩餘空間，所以 repeat(3, 1fr) 會建立三個等寬欄。repeat(n, 值) 是將軌道模式重複 n 次的簡寫，因此 repeat(4, 1fr) 等同於 1fr 1fr 1fr 1fr。minmax(最小值, 最大值) 設定一個不會縮小到最小值以下、也不會超過最大值的軌道；minmax(150px, 1fr) 讓欄至少保持 150px 寬，同時允許擴展。將它們組合起來——repeat(auto-fit, minmax(150px, 1fr))——就能建立一個隨容器寬度自動增減欄數的響應式網格。
如何不用 Media Query 做出響應式 CSS Grid？
使用帶有 auto-fit（或 auto-fill）和 minmax() 的 repeat()，讓網格自動重排：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。每欄至少保持 200px 寬，瀏覽器會根據容器大小自動計算欄數——窄螢幕欄數少，寬螢幕欄數多。切換到產生器的「響應式」模式，設定格子的最小寬度，複製結果即可。這是建立流動式卡片格線的最簡單方法，從手機到桌機都能自適應，完全不需要撰寫任何 Media Query。
grid-template-areas 是什麼？
grid-template-areas 讓你為區域命名，並用 ASCII 圖示的方式繪製版面。你用 grid-area 為每個子元素命名，然後像這樣映射網格：grid-template-areas: 'header header' 'sidebar main' 'footer footer'。在多個格子中重複同一個名稱會讓該區域橫跨它們，點號（.）則讓格子留空。這是建立經典頁面結構——頁首、側邊欄、主要內容、頁尾——最易讀的方式，因為模板的樣子就是版面的樣子。這裡的「區域」分頁會為你命名的每個區域撰寫模板及對應的 grid-area 規則。
如何建立 2x2 或三欄的網格？
建立 2x2 網格，設定兩欄兩列：grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; 並放入四個項目。建立三欄網格，使用 grid-template-columns: repeat(3, 1fr)，讓項目自動流入所需列數。在這個工具中，只需設定欄數和列數，預覽就會立即更新——不需要手動輸入任何程式碼。當相鄰軌道大小相同時，產生器會自動處理 repeat() 簡寫。
12 欄格線系統是什麼？
12 欄格線系統是由 Bootstrap 和 Foundation 推廣的設計慣例，將頁面分成十二個等寬欄。12 之所以好用，是因為它能被 2、3、4、6 整除，分別對應一半、三分之一、四分之一和六分之一。元件可以橫跨任意整數欄：6 欄代表一半，4 欄代表三分之一，3 欄代表四分之一。用 CSS Grid 只需一行就能重現：grid-template-columns: repeat(12, 1fr)，並在子元素上使用 grid-column: span 4 來定義大小。在這裡將欄數設為 12，即可獲得純 CSS 的經典框架格線，完全不依賴 Bootstrap。
CSS Grid 和 Flexbox 有什麼差別？
Grid 是二維的——同時控制列和欄；而 Flexbox 是一維的，只沿單一列或欄排列項目。需要建立有對齊列和欄的整體頁面或卡片版面（儀表板、圖庫、頁面結構）時選用 Grid。需要排列單條內容（如導覽列、工具列或一排按鈕）時選用 Flexbox。兩者可以配合使用：用 Grid 建立外層頁面結構，在各個格子內使用 Flexbox。
如何在 Tailwind CSS 中建立網格？
Tailwind 內建網格工具類別：加上 grid 和 grid-cols-3 可建立三個等寬欄，gap-4 設定間距，在子元素上使用 col-span-2 / row-span-2 讓它們橫跨。grid-cols-3 會編譯為 repeat(3, minmax(0, 1fr))。對於自訂需求——例如響應式 auto-fit 軌道——可使用任意值：grid-cols-[repeat(auto-fit,minmax(150px,1fr))]。切換到「Tailwind」輸出分頁，這個產生器會為你的容器和每個項目撰寫確切的工具類別，可直接貼入你的 JSX 或 HTML 標記中。
如何讓一個項目橫跨多欄或多列？
在子元素上使用 grid-column 和 grid-row。grid-column: span 2 讓項目佔兩欄寬；grid-column: 1 / 3 將項目從第 1 條線放到第 3 條線（同樣是兩欄）。垂直方向同理，使用 grid-row: span 2。在 Tailwind 中分別是 col-span-2 和 row-span-2。在這個練習場中，你可以在預覽區跨格拖曳來建立橫跨項目，或在項目面板中輸入精確的起始位置和跨越數。CSS 和 Tailwind 輸出都會即時更新。
如何設定網格項目之間的間距？
gap 屬性可在軌道之間新增間距：gap: 16px 會在所有列和欄之間各加 16px。你可以分別設定兩個軸向：gap: 24px 16px（先列間距後欄間距），也可以直接使用 row-gap 和 column-gap。gap 只影響格子之間的空間——它不會在網格外緣新增任何 padding，這是常見的混淆來源。使用這裡的列間距和欄間距控制項——勾選同步可設定統一間距，取消同步則可分別微調各軸。
這個 CSS Grid 產生器是免費的嗎？比 Layoutit 或 Sarah Drasner 的版本更好嗎？
完全免費，無需註冊，也不需要安裝任何東西。Layoutit Grid 是一個不錯的起點，但沒有 Tailwind 輸出，且需要切換到另一個分頁才能複製 grid-area 規則。Sarah Drasner 的 CSS Grid Generator 是一個簡潔的教學工具，但缺乏項目級別控制和可分享連結。UtiloKit 新增了 Tailwind CSS 輸出、命名模板區域、響應式 auto-fit 模式、可分享連結，以及互動式拖曳跨格項目編輯器——所有功能集於一處。一切都在瀏覽器中本地生成，你的版面配置不會被上傳。
這個 CSS Grid 產生器可以在 iPhone 或 Android 上使用嗎？
可以。這個工具完全響應式，支援所有現代行動瀏覽器，包括 iPhone 上的 Safari 和 Android 上的 Chrome。隨時隨地設計網格版面，複製 CSS 或 Tailwind 輸出，貼入你的專案。由於所有操作都在用戶端執行，無需上傳、無需帳號、無需等待。頁面載入後甚至可以離線使用。拖曳跨格項目編輯器支援觸控操作，讓你無需滑鼠也能建立複雜的網格版面。
