Chuyển đổi miễn phí
Lưới CSS Trình tạo bố cục
Tạo bố cục Lưới CSS một cách trực quan với bản xem trước trực tiếp. Điều chỉnh các cột, hàng, khoảng trống, căn chỉnh các mục, căn chỉnh các mục, v.v. - miễn phí và phía máy khách.
Xem trước trực tiếp
1
2
3
4
5
6
Cột (repeat(3, 1fr))
Hàng (repeat(2, 1fr))
khoảng cách cột (12px)
0px16px32px
khoảng cách hàng (12px)
0px16px32px
biện minh-mục
căn chỉnh các mục
Đầu ra 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;
}