免費轉換器
CSS Grid 版面生成器
透過即時預覽視覺化生成CSS Grid版面。調整grid-template-columns、列數、間距、justify-items、align-items等屬性 — 免費且在客戶端運行。
即時預覽
1
2
3
4
5
6
欄數 (repeat(3, 1fr))
列數 (repeat(2, 1fr))
欄間距 (12px)
0px16px32px
列間距 (12px)
0px16px32px
justify-items
align-items
CSS輸出
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;
justify-items: stretch;
align-items: stretch;
}
.item {
padding: 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}