CSS 柵格佈局生成器

← ToolBox / CSS 柵格佈局生成器

🧱 CSS 柵格佈局生成器

快速生成 CSS Grid 佈局：設置列數、列寬方式、間距與斷點，一鍵複製生成的 CSS 與 HTML 代碼。

📚 深度解析：Grid 網格佈局生成器

💡 常見使用場景

  • 排出二維響應式網格（圖庫、儀表盤）
  • 用 fr 單位做自適應列寬
  • 做聖盃/十二欄佈局
基礎網格
display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; 生成三等寬列、間距 16px。1fr 表示等分剩餘空間，auto-fill+minmax 可做自適應換行網格。
區域命名
grid-template-areas: "header header" "side main"; 用名字擺版式，直觀易維護；配合 grid-column: 1 / 3 跨列。

❓ 常見問題（FAQ）

fr 單位和 % 區別？
fr 是「剩餘空間分配單位」，會先扣掉固定尺寸和 gap 再分配；% 是容器寬度的百分比，不扣 gap，多個 % 列加 gap 易溢出。
auto-fill 和 auto-fit 區別？
auto-fill 保留空軌道佔位，auto-fit 把空軌道摺疊讓已有列撐滿。內容少時 auto-fit 看起來更舒展。
⚠️ 使用説明與注意事項

🔗 相關工具

🎨 CSS動畫生成器（關鍵幀可視化）CSS動畫生成器（關鍵幀可視化） 🎼 Web Audio 節拍器 - 免費生成器工具，在線節拍器在線節拍器 🎨 二維碼生成器（已有，可加強定製）二維碼生成器（已有，可加強定製） 🖼️ 像素畫生成器像素畫生成器 📱 響應式斷點生成器響應式斷點生成器