🟦
免費CSS Grid 產生器
視覺化設計 CSS grid — 軌道、單位和間隙 — 並複製產生的 CSS 和 HTML。
載入後可離線使用
視覺化設計 CSS grid：新增列和行，混合 fr/px/auto/min-content 單位，調整間隙，並觀看即時預覽。複製生產就緒的 CSS 和符合的 HTML。
預設
列 (3)
行 (2)
即時預覽
1
2
3
4
5
6
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 16px;
}html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>🔒 一切都在瀏覽器中執行 — 不會上傳任何內容。
工作原理
視覺化設計 CSS 網格：新增最多 8 列和 8 行，將每條軌道設為 fr、px、auto 或 min/max-content，並調整行/列間距。帶編號的即時預覽即時更新，產生的 grid-template CSS 和對應的 HTML 一鍵即可複製到剪貼簿。
- 1調整網格形狀用 + 和 − 新增/刪除列和行。
- 2設定軌道每列和每行都有自己的單位（1fr、100px、auto…）。
- 3調整間距行間距和列間距分別有獨立的滑桿。
- 4複製程式碼可用於生產環境的 CSS 和對應的 HTML 骨架。
一切都在你的瀏覽器中執行——不會上傳任何內容。