CSS Grid 生成器
通過圖形介面調整 grid-template-columns/rows、justify-items、align-items 和 gap，即時預覽真實的 CSS Grid 佈局效果，並一鍵複製生成的 CSS 程式碼。
使用提示
- grid-template-columns: repeat(3, 1fr) 中的 fr 單位表示"按比例分配剩餘空間"，與畫素等固定值不同，即使視口寬度變化，列的比例也保持不變。
- gap 屬性隻影響行與列之間的間距，不像 margin 那樣會影響網格外部。你還可以分別設定 row-gap 和 column-gap。
- 設為"auto"的軌道會根據內容的實際大小自動伸縮，適合內容長度不固定的列或行。
- 為單個專案設定 grid-column: span 2 之類的覆蓋值，可以讓頁首或頁尾橫跨整個網格寬度。
- 需要複雜的網格狀佈局時選擇 Grid，只需單方向（一行或一列）排列時選擇 Flexbox 即可（另請參閱我們的 CSS Flexbox 生成器）。
常見問題
當你需要同時控制行和列時，比如整體頁面骨架或儀表盤佈局，適合使用 CSS Grid。當只需單一方向（一行或一列）排列時，比如導航欄或一排卡片，Flexbox 會更簡潔。很多實際頁面會同時使用兩者：整體骨架用 Grid，元件內部用 Flexbox。
fr 是"fraction（比例）"的縮寫，表示容器內剩餘空間按指定比例分配的單位。例如 grid-template-columns: 1fr 2fr 會讓第二列的寬度是第一列的兩倍。與 px 等絕對單位不同，fr 軌道會在容器尺寸變化時保持比例不變。
repeat() 是用於重複相同軌道模式的函式，repeat(3, 1fr) 等價於寫成 grid-template-columns: 1fr 1fr 1fr。即使列數很多或需要動態變化，也只需指定重複次數和軌道大小兩個引數即可簡潔表達。
"聖盃"佈局是一種經典的網頁結構，由頁首、側邊欄、主內容區和頁尾組合而成。在 CSS Grid 出現之前，需要使用 float 或表格標籤等複雜的變通方法才能實現，而 grid-template-areas 等屬性只需幾行 CSS 就能重現這種常見佈局。
grid-column: span N 會讓該專案在水平方向上跨越 N 個軌道（列）。例如只給頁首元素設定 grid-column: span 3，就能讓它橫跨三列網格的整個寬度，而其他專案仍保持在各自的普通單元格中（grid-row 也支援同樣的 span 寫法）。
閒話 ― 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"已成為一種常見約定。兩者並非競爭關係，而是各有所長的互補工具——一維排列與二維網格佈局——在同一個頁面中同時使用兩者已被視為標準做法。