CSS Grid Generator
Build CSS Grid layouts visually.
1
2
3
4
5
6
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
column-gap: 16px;
row-gap: 16px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
}關於本工具
CSS網格佈局生成器允許您透過調整grid-template-columns、grid-template-rows、間距和對齊設定來視覺化設計二維網格佈局。即時預覽讓您在撰寫程式碼前就能看到效果。
CSS Grid是CSS中最強大的佈局系統，專為同時處理行和列的二維佈局設計。它補充了處理單方向佈局的Flexbox。此工具生成乾淨、可直接使用的CSS。
使用方法
- 設定grid-template-columns定義列結構，使用預設按鈕快速選擇常見模式。
- 可選設定grid-template-rows（大多數佈局保持auto即可）。
- 調整column-gap和row-gap設定間距。
- 使用justify-items和align-items控制儲存格內的項目對齊。
- 拖動滑桿更改項目數量，觀察網格如何響應。
- 點擊複製按鈕複製生成的CSS。
使用情境
前端開發者將CSS Grid用於頁面佈局、儀表板結構和圖片畫廊。設計師將網格規格匯出為精確CSS與開發者共享。CSS學習者直觀理解網格屬性的互動方式。設計系統團隊用於原型化間距和列模式。
常見問題
- 1fr是什麼意思？ — fr是分數單位。1fr表示可用空間的一份。repeat(3, 1fr)建立三個等寬欄。
- 什麼時候用Grid，什麼時候用Flexbox？ — 二維佈局（行和列）使用Grid。單方向排列項目時使用Flexbox。
- CSS Grid所有瀏覽器都支援嗎？ — 是的。自2017年起，CSS Grid在所有現代瀏覽器中完全支援。