CSS Grid Generator

CSS Grid tam olarak ne yapar?

Bir elemana display: grid verdiğinizde o eleman bir ızgara biçimlendirme bağlamı açar. Artık doğrudan çocukları normal akışta alt alta dizilmez; sizin tanımladığınız sütun ve satır şeritlerinin oluşturduğu iki boyutlu bir çizgi ağına oturur. Grid’i Flexbox’tan ayıran nokta budur: Flexbox tek bir eksende dağıtım yapar, Grid iki ekseni aynı anda tanımlar.

Izgaranın iskeleti grid-template-columns ve grid-template-rows ile kurulur. İkisi de boşlukla ayrılmış bir şerit listesi alır ve listedeki her değer bir sütunun ya da satırın boyutudur. Şeritlerin arasında numaralı çizgiler oluşur: üç sütunlu bir ızgarada soldan sağa 1, 2, 3 ve 4 numaralı dört dikey çizgi bulunur. Öğeleri yerleştirirken yazdığınız sayılar da bu çizgilerdir, sütunların kendisi değil. Bu ayrımı bir kez oturttuğunuzda grid-column: 1 / 3 yazımının neden iki sütun kapladığı da netleşir.

Şerit birimleri ve fr’nin gerçekte dağıttığı şey

Bir şerit sabit bir uzunluk (px, rem), kapsayıcıya oranlı bir yüzde, içeriğe göre büyüyen auto, mümkün olan en dar hâli veren min-content ya da taşmadan sığan en geniş hâli veren max-content olabilir. Bunların hepsi ölçülebilir değerlerdir.

fr ise farklı çalışır ve en çok yanlış anlaşılan birimdir. fr bir uzunluk değil, bir pay katsayısıdır ve kapsayıcının tamamını değil, yalnızca boş alanı paylaştırır. Bu boş alan, esnek olmayan şeritler ve aralarındaki boşluklar düşüldükten sonra geriye kalan yerdir. Yani 200px 1fr 1fr yazdığınızda 1fr’lerin her biri “toplamın yarısı” değil, “200px ve gap’ler çıktıktan sonra kalanın yarısı” kadar yer alır.

minmax() ve duyarlı ızgara kalıbı

minmax(min, max) bir şeride alt ve üst sınır verir. Şerit alt sınırın altına inmez, üst sınırın üstüne çıkmaz, arada içeriğe ve boş alana göre serbestçe hareket eder. Tek başına da işe yarar ama asıl gücü repeat() ile birleştiğinde ortaya çıkar.

Medya sorgusu yazmadan duyarlı bir kart ızgarası isteyen hemen herkes şu satırı kullanır: repeat(auto-fit, minmax(240px, 1fr)). Tarayıcı kapsayıcıya 240px’ten dar olmayan kaç sütun sığdırabileceğini hesaplar, sığdırır ve artan yeri 1fr üzerinden sütunlara dağıtır. Ekran daraldıkça sütun sayısı kendiliğinden azalır.

auto-fit ile auto-fill arasındaki fark yalnızca içerik azken görünür. auto-fill üretilen boş şeritleri ızgarada bırakır, dolayısıyla üç kartınız varken de sekiz sütunluk bir düzen durur ve kartlar sola yaslanır. auto-fit ise boş kalan şeritleri sıfırlar, böylece kalan kartlar genişleyip satırı doldurur. Kartların büyümesini istiyorsanız auto-fit, sütun hizasının sabit kalmasını istiyorsanız auto-fill doğru tercihtir.

Çizgi numarasıyla mı, alan adıyla mı?

Bir öğeyi yerleştirmenin iki yolu var. Birincisi çizgi numarası: grid-column: 2 / 4 öğeyi 2. dikey çizgiden 4. dikey çizgiye kadar uzatır. span anahtar kelimesiyle “nereden başlarsa başlasın iki sütun kaplasın” da diyebilirsiniz.

İkincisi grid-template-areas: kapsayıcıda düzeni isimlerden oluşan bir şema olarak çizersiniz, sonra her çocuğa grid-area ile bir isim verirsiniz. Sayfa iskeleti gibi az sayıda ve anlamlı bölgeden oluşan düzenlerde bu yöntem CSS’i okunur hâle getirir; düzeni değiştirmek için tek yapmanız gereken şemayı yeniden yazmaktır. Buna karşılık kart listesi gibi tekrar eden ve sayısı belirsiz içeriklerde alan adları hızla hantallaşır, orada çizgi numarası daha pratiktir.

Örtük şeritler, grid-auto-rows ve dense

Tanımladığınız şeritlerden daha fazla öğe koyduğunuzda tarayıcı kendiliğinden yeni şeritler üretir. Bunlara örtük şerit denir ve boyutları varsayılan olarak auto’dur. Yüksekliklerini kendiniz belirlemek isterseniz grid-auto-rows kullanın; yeni öğelerin satır yerine sütun açmasını isterseniz grid-auto-flow: column yazın.

grid-auto-flow: dense ise farklı boyutlardaki öğelerin bıraktığı delikleri, sonradan gelen küçük öğeleri geri alarak doldurur. Görsel boşlukları kapatır ama öğelerin görsel sırasını DOM sırasından ayırır, bu da klavyeyle gezinen ve ekran okuyucu kullanan kişiler için kafa karıştırıcı olabilir. Sırası önemsiz galerilerde rahatça kullanılır, okunması gereken içerikte kaçınmakta fayda var.

justify ve align, items ve content

İki eksen var: justify-* satır içi ekseni yani yatayı, align-* blok eksenini yani dikeyi kontrol eder. İki de kapsam var: *-items her öğeyi kendi hücresinin içinde hizalar, *-content ise şerit kümesinin tamamını kapsayıcının içinde hizalar. Bu ikincisi yalnızca şeritler kapsayıcıdan küçük kaldığında bir şey yapar; sütunlarınız 1fr ise ortada boş alan kalmadığı için justify-content hiçbir etki yaratmaz. Aracın çıktısında varsayılan değerde kalan hizalama satırlarının hiç yazılmamasının sebebi de bu: yazılmayan bir satır okuyana yanlış bir şey ima etmez.

Grid mi, Flexbox mı?

Pratik kural şu: dış çerçeveyi Grid ile kurun, çerçevenin içindeki küçük ve tek eksenli grupları Flexbox ile dizin. İkisi rakip değil, iç içe kullanılan iki katmandır.

Sık yapılan üç hata

• 1fr’in taşması. 1fr aslında minmax(auto, 1fr) demektir ve bu auto alt sınırı, şeridin içeriğinden daha dar olmasını engeller. İçinde uzun bir metin ya da kaydırılan bir tablo olan sütun bu yüzden taşar. Çözüm minmax(0, 1fr) yazmak ya da öğeye min-width: 0 vermektir.
• Grid’in torunlara işlemediğini unutmak. Izgara yalnızca doğrudan çocukları kapsar. Bir sarmalayıcı div eklediğinizde içindekiler artık ızgaranın parçası değildir; ya sarmalayıcıyı kaldırın ya da ona kendi display: grid tanımını verin.
• gap’i margin sanmak. gap yalnızca şeritlerin arasına boşluk koyar, ızgaranın dış kenarına değil ve ilk öğeden önce bir boşluk üretmez. Dış boşluk istiyorsanız kapsayıcıya padding verin.

Renk geçişli bir arka planla birlikte çalışıyorsanız CSS gradyan oluşturucu aracıyla üretilen değeri doğrudan buradaki kapsayıcıya uygulayabilirsiniz.