Ücretsiz Dönüştürücü
CSS Izgarası Düzen Oluşturucu
Canlı önizlemeyle görsel olarak CSS Izgara düzenleri oluşturun. Izgara şablonu sütunlarını, satırları, boşluğu, iki yana yaslama öğelerini, öğeleri hizalamayı ve daha fazlasını ücretsiz ve istemci tarafında ayarlayın.
Canlı Önizleme
1
2
3
4
5
6
Sütunlar (repeat(3, 1fr))
Satırlar (repeat(2, 1fr))
sütun boşluğu (12px)
0px16px32px
satır boşluğu (12px)
0px16px32px
öğeleri yasla
öğeleri hizala
CSS Çıkışı
.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;
}