CSS Grid Oluşturucu
CSS Grid nedir?
CSS Grid Layout, CSS'deki en güçlü düzen sistemidir. Hem sütunları hem satırları işleyebilen iki boyutlu bir sistemdir, ağırlıklı olarak tek boyutlu olan flexbox'tan farklıdır.
Bu CSS Grid Oluşturucuyu nasıl kullanılır
Grid boyutlarını ayarla
Kenar çubuğu kontrollerini kullanarak sütun, satır ve boşluk boyutlarını tanımlayın.
Grid alanları tanımla
Önizlemede tıklayıp sürükleyerek dikdörtgen bölgeler seçin.
Birimleri özelleştir
Giriş alanlarını kullanarak sütun ve satır boyutlarını ayarlayın.
Şablon dene
Holy Grail, Blog veya Dashboard gibi hazır düzenlerden seçin.
Kod oluştur
Kullanıma hazır CSS ve HTML dışa aktarmak için "Kod Oluştur"a tıklayın.
CSS Grid Sözdizimi Kılavuzu
CSS Grid'in temeli; grid-template-columns (sütun genişliklerini tanımlamak için), grid-template-rows (satır yüksekliklerini tanımlamak için) ve grid-gap (boşlukları ayarlamak için) gibi özellikleri içerir. Kesirli birimlerin (fr) kullanılması, görüntüleme alanı boyutuna uyum sağlayan esnek düzenlere olanak tanır.
CSS Grid Düzen Örnekleri
Yaygın örnekler arasında 'Holy Grail' düzeni (üstbilgi, yan menü, ana içerik, altbilgi) ve 'Ana/Yan Menü' düzeni yer alır. grid-template-areas ile bu bölgeleri sezgisel isimler kullanarak tanımlayabilir, kodunuzu çok daha temiz ve bakımı kolay hale getirebilirsiniz.