Css Grid, auto-fill ve auto-fit

Öncesinde grid üzerine giriş netiliğinde ufak bir yazı hazırlamıştım. Css’in bu yeni özelliği artık web’de daha çok kullanılır durumda. Neredeyse flex ile benzer tarayıcı desteğine sahip hale gelmiş bulunmakta.

Özellikle geriye dönük tarayıcı uyumluluğunun aranmadığı projelerde etkin olarak kullanılabilir duruyor. Proje bazlı grid yapıları oluştururken elinizi biraz daha rahatlatabilir.

Grid ile birlikte yazılan kodun büyük bir kısmı kapsayıcı bazlı olmaya başladı. Alt elementlere fazla dokunmadan “container” üzerinden satır ve sütünları yapılandırmak mümkün.

Auto-fill ve auto-fit özellikleri de bu esnada devreye giriyor. Özellikle duyarlı bir grid yapısı oluşturmak gibi bir hedefimiz varsa, auto-fill ve auto-fit ile benzer işi çok daha az bir maliyetle yapabilmek mümkün oluyor. Mozilla’nin dökümantasyonunda bir fotoğraf galerisi örneği görebilirsiniz.

Sonda yapacağımız özeti baştan söyleyelim: Esasında auto-fill ve auto-fit özellikleri belirli bir düzlem boyunca yerleştirilecek olan alt elementlerin, yerleştirilme esnasında konumlanacakları posizyonların sıkılığını belirtmemizi sağlıyor.

Özeti biraz açalım:

Sayfanın tamamını kaplayan bir container elementimiz var. Onun içerisine grid özelliklerini kullanacağımız başka bir taşıyıcı element açıyoruz. Bu .grid adlı taşıyıcı elemente display: grid; özelliğini tanımladığımızda .container düzlemi boyunca genişleyen bir taşıyıcı elde etmiş oluruz. Burada amacımız içerisinde barındırdığı .grid-item’ları belirli değerler üzerinden sıralamak.

Grid içerisindeki divleri biraz daha anlaşılır kılmak için ufak bir düzenleme yapıyoruz.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  margin-top: 40px;
}
.grid-item {
  text-align: center;
  padding: 20px;
  background-color: gray;
  color: black;
}
.grid-item:nth-child(odd) {
  background-color: black;
  color: gray;
}

Şu an .grid-item elementlerinin sayfada görünümü bu şekilde. Burada yapacağımız, auto-fill ya da auto-fit kullanarak 4'lü bir grid yapısı oluşturmak. Bunun için .grid isimli taşıyıcıya grid özelliğini tanımlıyoruz.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

İlk bakışta aşina olmadığımız 3 özellik söz konusu. repeat, auto-fill ve minmax. Repeat’i iki parametre alan bir fonksiyon gibi görebilirsiniz. Aldığı ilk parametre bir sayı ya da auto-fill, fit olabilir. grid içerisindeki sütünların ya da satırların kaç kere takrarlanacağı belirtilir. İkinci aldığı parametre ise ölçü birimidir. Sütun ya da satırların uzunluk ya da yüksekliklerine dair kriterler tanımlanabilir.

Minmax grid taşıyıcı içerisindeki item’ların alabileceği en küçük ve en büyük değeri tanımlamamıza olanak verir.

Auto-fill ise minmax değeri verdiğimiz item’ları ne sıklıkla taşıyıcı içerisine yayılacağını belirtmemize olanak verir.

Yukarıdaki örnek ile taşıyıcının uygulamasını istediğimiz davranışlar şunlar oluyor:

• Taşıcının width değeri üzerinden alt elementleri en düşük 200px genişliğinde olacak şekilde sırala.
• Eğer ki en düşük değer olan 200px üzerinden bir başka alt elementin daha taşıyıcıya sığma ihtimali varsa, orada bir alt element daha varmışçasına bir yapı kur.

Evet, ilk bakışta biraz karmaşık duruyor. Tarayıcı üzerinde göstermek gerekirse:

Grid taşıyıcısı altındaki elementlere en düşük genişlik olarak 200px değeri tanımladığımız için, taşıyıcının geniliği 800 ile 1000 px arasında olduğu sürece elementlerin genişliğini uzat, eğer 800'ün altına düşerse elementleri sondan başlayarak bir alt satıra kaydır. 1000'in üzerine çıkarsa da, her bir 200'lük artışta taşıyıcının içerisine yeni bir alt element gelmişçesine boşluklar yarat. İşte auto-fill ile yarattığımız etki tam olarak budur.

Auto-fit özelliği ise daha basit bir işlevi yerine getiriyor. “.grid” class’ını şu şekilde güncellersek:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid taşıyıcısının genişliği 800px’in altına düşerse alt elementleri sondan başlayarak alt satıra al, eğer 800px’in üzerine çıkarsa da elementleri taşıyıcıyı tam olarak dolduracak şekilde genişlet.

Görüldüğü üzere auto-fit ile auto-fill’de olduğu gibi fazladan bir hesaplama yapma ihtiyacı duyulmuyor. Elementler taşıyıcının genişliği üzerinde olabildiğince yayılıyor.

Bu iki özelliğin, css’in grid özelliklerini tam olarak anlayabilmek ve kullanabilmek için önemli olduğunu düşünüyorum. Umarım anlaşılır kılmışımdır.