CSS Grid Nedir?
Yayın: · Son güncelleme:
CSS Grid Nedir? Kısaca
CSS Grid, web sayfasında öğeleri satır ve sütunlardan oluşan iki boyutlu bir ızgaraya yerleştirmeyi sağlayan CSS yerleşim sistemidir. Sayfa iskeleti ve galeri gibi karmaşık düzenler için kullanılır.
CSS Grid nedir?
CSS Grid, bir kapsayıcıyı satır ve sütunlardan oluşan bir ızgaraya bölüp öğeleri bu hücrelere yerleştirmeyi sağlayan yerleşim modelidir. Kapsayıcıya display: grid verilerek başlatılır. Flexbox tek eksende çalışırken Grid iki boyutu, yani satır ve sütunu aynı anda yönetir.
Bu sayede başlık, yan menü, içerik ve alt bilgi gibi bölümlerden oluşan bir sayfa iskeleti, eskiden gereken karmaşık hilelere gerek kalmadan birkaç satırla kurulur.
Temel özellikler
grid-template-columns sütun sayısını ve genişliğini belirler. Örneğin 1fr 2fr 1fr değeri, ortadaki sütunun yanlardakilerin iki katı genişlikte olmasını sağlar. Buradaki fr birimi, kalan boşluğun paylaştırılmış bir kesridir.
gap hücreler arasına boşluk koyar. grid-template-areas ile bölgelere "baslik", "menu", "icerik" gibi adlar verip düzeni neredeyse bir çizim gibi tarif edebilirsiniz.
Örnek kullanım
Bir fotoğraf galerisi düşünün. Kapsayıcıya grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) yazdığınızda, her biri en az 200 piksel genişliğinde olacak kadar sütun otomatik oluşur. Geniş ekranda beş, telefonda iki sütun görünür ve bunun için ayrı bir media query yazmanız gerekmez.
Pratikte iki sistem birlikte kullanılır. Sayfanın genel iskeleti Grid ile, menü ya da düğme grubu gibi tek satırlık parçalar Flexbox ile kurulur. Tarayıcının geliştirici araçlarındaki Grid görselleştirmesi, çizgileri ve hücreleri ekranda göstererek hata ayıklamayı kolaylaştırır.
Sıkça Sorulan Sorular
CSS Grid ile Flexbox arasındaki fark nedir?
Flexbox öğeleri tek bir satır ya da sütun boyunca düzenler. CSS Grid ise satır ve sütunları birlikte kontrol ederek iki boyutlu düzen kurar.
CSS Grid öğrenmek zor mu?
Temel özellikleri birkaç saatte öğrenilebilir. `grid-template-columns`, `gap` ve `fr` birimiyle başlayıp küçük bir galeri yapmak iyi bir alıştırmadır.