CSS Grid 生成器
通過圖形介面調整 grid-template-columns/rows、justify-items、align-items 和 gap，即時預覽真實的 CSS Grid 佈局效果，並一鍵複製生成的 CSS 程式碼。
邊動手邊搭 CSS Grid 版面
CSS Grid 是能同時照管列與欄的二維版面之法。本工具讓您在畫面上切換 grid-template-columns／rows、justify-items、align-items 與 gap，邊改邊看結果，並把寫成的 CSS 複製出去。
與 Flexbox 的取捨，只消想「是一條軸還是兩條軸」，便不會猶疑。 只要排成一列，Flexbox 便夠；若要列與欄同時對齊，如表格那般的排布，Grid 才更合適。 Grid 獨有的長處在 fr 這個單位，它表示「剩餘空間的份額」：寫作 1fr 2fr，餘下的寬度便按一比二分。另一件值得記牢的，是 repeat(auto-fit, minmax(200px, 1fr)) 這一寫法。 單憑它，便能得到一種欄數隨寬度增減、卻一條媒體查詢也不必寫的版面。
使用方法
- 從預設起步 三欄、頁首配側欄等常用樣式都已備好。
-
改動欄與列的定義
用
fr便可把剩餘的空間按比例分開。 -
試一試對齊的屬性
justify-items與align-items定下每個儲存格內內容的落位。 - 複製產生的 CSS 排布中意之後，便可原樣貼進您的程式。
用好本工具的小技巧
- grid-template-columns: repeat(3, 1fr) 中的 fr 單位表示"按比例分配剩餘空間"，與畫素等固定值不同，即使視口寬度變化，列的比例也保持不變。
- gap 屬性隻影響行與列之間的間距，不像 margin 那樣會影響網格外部。你還可以分別設定 row-gap 和 column-gap。
- 設為"auto"的軌道會根據內容的實際大小自動伸縮，適合內容長度不固定的列或行。
- 為單個專案設定 grid-column: span 2 之類的覆蓋值，可以讓頁首或頁尾橫跨整個網格寬度。
- 需要複雜的網格狀佈局時選擇 Grid，只需單方向（一行或一列）排列時選擇 Flexbox 即可（另請參閱我們的 CSS Flexbox 生成器）。
這些情境會用到
搭起整頁的骨架
頁首、側欄、正文與頁尾的擺放，正是 Grid 的拿手好戲。
把卡片排成方格
auto-fit 與 minmax 一配，欄數便隨螢幕寬度而變。
對齊一張表單
把標籤與輸入框的欄對齊，縱向的線便通了，讀來省力得多。
學習 Grid
改一個值看一眼結果，列與欄是怎樣定下的便一清二楚。
CSS Grid 的術語
- 網格容器
- 被賦予
display: grid的父元素。列與欄便定義在它之內。 - fr
- 表示剩餘空間份額的單位。 寫作
1fr 2fr，餘下的寬度便按一比二分。 - grid-template-columns
- 定義欄的次第與寬度。用
repeat()可免去重複書寫同一取值。 - minmax
- 給出最小值與最大值的函式。
minmax(200px, 1fr)意即「先保住 200 像素，有餘便長」。 - auto-fit
- 放得下多少便造多少欄的關鍵字。與
minmax相配，無須任何媒體查詢便能換行。 - gap
- 列與欄之間所留的空隙。兩個方向可分別設定。
常見問題
閒話 ― CSS Grid 追求的、Flexbox 未曾涉足的"第二維度"
CSS Grid Layout 被設計為一種二維佈局系統，可以同時定義行和列，這與專注於單一方向排列的 Flexbox 形成對比。W3C 從 2011 年前後開始對其進行標準化，2017 年 Chrome、Firefox、Safari 和 Edge 幾乎同步實現支援後，它在實際專案中的應用迅速普及開來。
在 Grid 出現之前，將頁面排列成經典的"聖盃"結構——頁首、側邊欄、主內容和頁尾——需要依賴 float 或表格標籤等複雜的變通手段。CSS Grid 引入了 grid-template-columns、grid-template-rows、grid-template-areas 等宣告式屬性，讓開發者只需幾行 CSS 就能重現這種常見佈局。
如今，儀表盤介面、圖片畫廊以及雜誌風格的排版等許多圍繞行列展開的設計工作都是用 CSS Grid 實現的。讓巢狀網格繼承父級軌道尺寸的"subgrid"特性也已在主流瀏覽器中逐步普及，使得保持複雜的多層佈局一致性變得更加容易。
在實踐中，"整體頁面骨架用 Grid，元件內部元素排列用 Flexbox"已成為一種常見約定。兩者並非競爭關係，而是各有所長的互補工具——一維排列與二維網格佈局——在同一個頁面中同時使用兩者已被視為標準做法。