CSS Grid Üretici
Hücrelere tıklayarak named area çiz, track kenarlarını sürükle, gap ve hizalama ayarla, sütun / satır span ile alt öğeler ekle, CSS, Tailwind, HTML, React JSX veya JSON olarak kopyala.
Canlı önizleme
Izgarayı, öğeleri ve alanları düzenle — önizleme anında güncellenir.
1
2
3
4
5
6
Adlandırılmış alanlar
Bir ad yaz, sonra iki hücreye (başlangıç + bitiş) tıklayarak dikdörtgen boya. Adı boş bırakıp tıklarsan hücreyi temizler.
İpucu: yukarı bir ad yaz, sonra iki hücreyle dikdörtgeni boya.
Hazır şablonlar
Sık kullanılan düzenler — bir tıkla yükle ve özelleştir.
Parçalar ve boşluklar
Sütun ve satır sayısını değiştir, her birinin boyutunu ayarla.
Sütunlar3 sütun
- 1
- 2
- 3
Satırlar2 satır
- 1
- 2
16px
16px
Izgara öğeleri
6 / 12En fazla 12 alt öğe. Sütun/satır çizgilerini ya da adlandırılmış alan seç.
#1
sütun başı
sütun sonu
satır başı
satır sonu
Alan
#2
sütun başı
sütun sonu
satır başı
satır sonu
Alan
#3
sütun başı
sütun sonu
satır başı
satır sonu
Alan
#4
sütun başı
sütun sonu
satır başı
satır sonu
Alan
#5
sütun başı
sütun sonu
satır başı
satır sonu
Alan
#6
sütun başı
sütun sonu
satır başı
satır sonu
Alan
Kod çıktısı
CSS, Tailwind, HTML, JSX veya JSON olarak kopyala.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
}