CSS Grid Oluşturucu
Gerçek Zamanlı Önizleme
Görsel CSS Grid Oluşturucu Neden Kullanılır?
CSS Grid, CSS'nin en güçlü düzen sistemidir ancak sözdiziminin öğrenme eğrisi diktir. Görsel oluşturucumuzla kaydırıcılar ve açılır menülerle izgarayı ayarlayabilir ve her özelliğin etkisini gerçek zamanlı görebilirsiniz.
Gerçek Zamanlı Izgara Önizleme
Sütun, satır, boşluk ve hizalama her ayarlamasında ızgara gerçek zamanlı güncellenir
fr Birimi Desteği
Şablonlar, kapsayıcı boyutuna uyarlanan esnek ızgaralar için fr (kesir) birimi kullanır
Hazır CSS
grid-template-columns, rows, gap ve align-items içeren temiz .container CSS bloğu dışa aktarın
CSS Grid Düzeni Nasıl Oluşturulur
Sütun ve Satırları Ayarlayın
Izgaranın sütun ve satır sayısını kaydırıcılarla belirtin
Şablon ve Boşluğu Seçin
Sütun şablonunu (eşit, sabit+esnek veya duyarlı minmax) seçin ve boşluğu ayarlayın
CSS'yi Kopyalayın
'CSS'yi Kopyala'ya tıklayarak stil sayfanıza yapıştırılabilecek tam CSS bloğunu alın
CSS Grid Kullanım Alanları
Sayfa Düzeni
Adlandırılmış ızgara alanlarıyla üst bilgi/kenar çubuğu/ana içerik/alt bilgi yapısı oluşturun
Panel
grid-column ve grid-row span'ıyla farklı boyutlardaki kartlar için karmaşık panel düzeni oluşturun
Galeri
auto-fill ve minmax ile duyarlı biçimde uyarlanan tuğla veya düzenli galeri oluşturun
Dergi Düzeni
Eşit olmayan sütunlar ve birden fazla hücreye yayılan öne çıkan içerikle düzenleme düzeni oluşturun
CSS Grid En İyi Uygulamaları
✓ Yüzde Yerine fr Birimine Öncelik Verin
fr (kesir) birimi, sabit boyutlu sütunlardan sonra mevcut alanı dağıtır ve esnek sütunların manuel hesaplanmasını önler.
✓ Duyarlı Izgaralar için minmax() Kullanın
repeat(auto-fill, minmax(250px, 1fr)) sütun sayısını otomatik ayarlayan duyarlı ızgara oluşturur — medya sorgusu gerekmez.
✓ Adlandırılmış Izgara Alanları Kullanın
Adlandırılmış hücreler (header, sidebar, main, footer) içeren grid-template-areas, sayfa düzenini okunabilir ve değiştirilebilir kılar.
✓ auto-fill ve auto-fit Farkını Anlayın
auto-fill maksimum sayıda iz oluşturur (boş bırakır). auto-fit boş izleri katlar ve mevcut öğeleri genişletir — kart ızgaraları için genellikle idealdir.
❓ Sık Sorulan Sorular
CSS Grid'de fr birimi nedir?
fr 'kesir (fraction) birimi' anlamına gelir. 1fr, ızgara kapsayıcısının mevcut boş alanının bir kesrini temsil eder. repeat(3, 1fr) mevcut alanı eşit paylaşan 3 sütun oluşturur.
CSS Grid ile Flexbox arasındaki fark nedir?
Flexbox tek boyutlu — öğeleri bir eksen üzerinde (satır veya sütun) yerleştirir. CSS Grid iki boyutlu — satır ve sütunları aynı anda kontrol edebilir; sayfa düzeni için çok daha güçlüdür.
minmax() ne yapar?
minmax(min, max) ızgara izi için boyut aralığı belirler. minmax(200px, 1fr) sütunun en az 200px genişliğinde olduğunu ancak mevcut alanı dolduracak şekilde büyüyebileceğini belirtir — duyarlı ızgaralar için idealdir.
Flexbox yerine CSS Grid ne zaman kullanılır?
Satır ve sütunları aynı anda kontrol etmek için 2D düzenlerde Grid kullanın. Gezinti çubuğu veya form satırları gibi bileşenlerin 1D düzenlerinde Flexbox kullanın. Modern düzenlerin çoğu her ikisini de kullanır.