CSS Grid auto-fill, auto-fit ve minmax(): Otomatik Yerleşim ve subgrid

Otomatik yerleşim: varsayılan kurallar

Grid öğelerine hiçbir yerleşim bilgisi vermezseniz her biri kaynak koddaki sırasıyla bir hücreye yerleşir. Varsayılan akış satır yönündedir: grid önce ilk satırın hücrelerini doldurur, sonra grid-template-rows ile tanımlanmış satırlara geçer. Açık grid'de yeterli satır yoksa yeni örtük satırlar oluşturur. Bu örtük satırlar varsayılan olarak auto boyutludur, yani taşma olmadan içeriklerini alacak kadar uzarlar.

Sıralama konusunda MDN'in kullandığı terim "order ile değiştirilmiş belge sırası"dır: öğelere order verdiyseniz otomatik yerleşim bu sırayı, vermediyseniz kaynak sırasını izler. Bir kısmı elle yerleştirilmiş, bir kısmı otomatik yerleşen öğelerde ise grid önce konumu belirli öğeleri yerleştirir, ardından kalanları boş hücrelere dağıtır. Otomatik öğeler, kendinden önce gelen yerleştirilmiş öğenin konumundan sonra başlamaz; ızgaranın başındaki boş hücrelerden itibaren kaynak sırasıyla yerleşir.

grid-auto-rows ve grid-auto-columns: örtük izlerin boyutu

Örtük satırların yüksekliğini grid-auto-rows, örtük sütunların genişliğini grid-auto-columns belirler. Bu özellikler grid-template-* ile aynı iz boyutlarını kabul eder: uzunluk, yüzde, fr, min-content, max-content, auto, minmax() ve fit-content().

.a { grid-auto-rows: 100px; }
/* her örtük satır tam 100px */

.b { grid-auto-rows: minmax(100px, auto); }
/* en az 100px; içerik daha uzunsa satır içeriğe göre uzar */

.c { grid-auto-rows: 100px 200px; }
/* kalıp tekrar eder: 100px, 200px, 100px, 200px ... */

Üçüncü örnek çoğu kişinin bilmediği bir ayrıntıdır: grid-auto-rows bir iz listesi alabilir ve bu liste örtük grid'e içerik eklendikçe tekrar eder. Yüzde değerleri satırlarda grid kapsayıcının blok boyutuna göre hesaplanır; kapsayıcının yüksekliği belirsizse yüzde auto gibi davranır.

grid-auto-flow: row, column ve dense

grid-auto-flow, otomatik yerleşimin hangi yönde ilerleyeceğini ve boşlukları doldurup doldurmayacağını belirler. Tek anahtar sözcük olarak row, column ya da dense; iki anahtar sözcük olarak row dense ya da column dense yazılabilir. Yön verilmezse row kabul edilir.

• row (varsayılan): Satırları sırayla doldurur, gerektiğinde yeni satır ekler.
• column: Tanımlı satırlar içinde sütunları sırayla doldurur; bir sütun dolunca sonraki açık sütuna geçer ya da örtük bir sütun oluşturur. Bu sütunların genişliğini grid-auto-columns belirler.
• dense: Daha önce bırakılmış boşlukları, sonradan gelen ve sığan küçük öğelerle doldurmaya çalışır.

Varsayılan algoritma MDN'in deyimiyle "seyrek"tir: yerleşim ızgarada yalnızca ileri doğru gider ve geriye dönüp boşluk doldurmaz. Bu, öğelerin sırasının korunmasını garanti eder. Örneğin bazı öğelere grid-column-end: span 2 verdiğinizde, sıradaki iki sütunluk öğe satırın sonuna sığmıyorsa bir sonraki satıra geçer ve arkasında boş hücre kalır. dense eklendiğinde grid ilerlerken karşılaştığı ve önceki bir boşluğa sığan öğeyi DOM sırasından çıkarıp o boşluğa koyar.

.galeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  grid-auto-flow: dense;
}
.galeri .yatay {
  grid-column-end: span 2;   /* yatay görseller iki sütun */
}
/* sonuç: dikey görseller, yatay görsellerin bıraktığı boşlukları doldurur */

Anonim grid öğeleri

Grid kapsayıcının içinde herhangi bir öğeye sarılmamış düz bir metin varsa tarayıcı onun için anonim bir grid öğesi oluşturur. Bu öğeyi seçecek bir seçici olmadığı için her zaman otomatik yerleşimle konumlanır. Izgarada beklenmedik bir yerde metin görüyorsanız sarılmamış bir metin parçası olup olmadığını kontrol edin.

minmax(): bir iz için aralık

minmax(min, max), bir izin boyutunu en küçük (min) ile en büyük (max) değer arasında bir aralıkla tanımlar ve yalnızca grid'de kullanılır. Her iki argüman uzunluk, yüzde ya da min-content, max-content, auto anahtar sözcüklerinden biri olabilir. MDN'in belirttiği kurallar şunlardır:

• fr yalnızca max olarak kullanılabilir: minmax(200px, 1fr) geçerlidir, minmax(1fr, 200px) geçersizdir.
• max, min değerinden küçükse yok sayılır: minmax(300px, 100px), 300 piksel gibi davranır.
• auto en küçük değer olarak: İzdeki öğelerin min-width ya da min-height ile belirlenen en büyük en küçük boyutunu temsil eder.
• auto en büyük değer olarak: max-content ile aynıdır; farkı, izin justify-content ve align-content ile esnetilebilmesidir.

#kapsayici {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
}
/* 1. sütun: içerik kadar geniş, en fazla 300px
   2. sütun: esnek, en az 200px
   3. sütun: sabit 150px */

1fr neden bazen daralmaz? minmax(0, 1fr)

grid-template-columns sayfasına göre bir minmax() içinde olmayan fr değeri otomatik bir en küçük değer taşır, yani 1fr aslında minmax(auto, 1fr) gibi davranır. auto en küçük değer, izdeki öğelerin en küçük boyutudur; MDN'in min-width sayfasına göre de grid öğelerinde min-width: auto çoğu durumda min-content boyutuna çözülür. Sonuç: içinde uzun bir URL ya da bölünmeyen bir kelime olan bir 1fr sütunu, payına düşen genişlikten daha geniş olur ve diğer sütunları daraltır ya da ızgarayı taşırır.

.esit-sutunlar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* sonuç: en küçük değer 0 olduğu için üç sütun içerikten bağımsız
   olarak eşit kalır; uzun içerik sütun içinde taşar */

MDN'in minmax() sayfasındaki etkileşimli örneklerden biri tam olarak bu değeri (minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)) gösterir. Sütunun içinde taşan metni yönetmek için metin kaydırma yazısındaki overflow-wrap gibi özelliklere başvurabilirsiniz.

fit-content(): içerik kadar, ama sınırlı

fit-content() fonksiyonu bir izi içeriği kadar geniş yapar ama verilen sınırın üzerine çıkarmaz. MDN formülü min(maximum size, max(minimum size, argument)) olarak verir; grid izlerinde bu, minmax(auto, max-content) gibi hesaplanıp argümanda kırpılmak demektir. Argümansız fit-content anahtar sözcüğünden farklıdır ve grid iz boyutlarında yalnızca fonksiyon biçimi geçerlidir.

.etiketli {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
}
/* kısa içerikli sütun içeriği kadar dar kalır;
   uzun içerikli sütun 300px'de durur; son sütun kalan alanı alır */

auto-fill ve auto-fit: sığdığı kadar sütun

repeat() fonksiyonunda tekrar sayısı yerine auto-fill ya da auto-fit yazdığınızda tarayıcı sütun sayısını kendisi hesaplar. MDN'e göre kapsayıcının ilgili eksende belirli ya da en büyük bir boyutu varsa tekrar sayısı, taşmaya yol açmayan en büyük pozitif tam sayıdır. Hesapta her iz, belirliyse en büyük boyutlandırma değeriyle, değilse en küçük değeriyle ele alınır ve boşluklar da hesaba katılır. minmax(160px, 1fr) içinde en büyük değer 1fr belirli bir uzunluk olmadığı için hesap 160 piksel üzerinden yapılır.

.kartlar {
  display: grid;
  width: 760px;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* kaç sütun sığar? n sütun için gereken = n x 160 + (n - 1) x 20
   n = 4: 640 + 60 = 700px  (760'a sığar)
   n = 5: 800 + 80 = 880px  (sığmaz)
   sonuç: 4 sütun
   genişlik: (760 - 3 x 20) / 4 = 700 / 4 = 175px */

Şimdi aynı kapsayıcıda yalnızca iki kart olduğunu düşünelim. Fark tam burada ortaya çıkar:

• auto-fill: Dört sütun korunur. İki kart ilk iki sütuna yerleşir ve 175 piksel genişliğinde kalır; diğer iki sütun boş durur ama yer kaplamaya devam eder.
• auto-fit: MDN'e göre öğeler yerleştirildikten sonra boş kalan tekrarlı izler çökertilir. Çöken iz 0 piksel sabit boyutlu sayılır ve iki yanındaki oluklar da çöker. Geriye iki iz ve aralarında tek bir oluk kalır: (760 - 20) / 2 = 370 piksel. İki kart bütün genişliğe yayılır.

Hangisini seçeceğiniz tasarıma bağlıdır. Kart sayısı az olduğunda kartların devasa görünmesini istemiyorsanız auto-fill, her durumda satırın dolmasını istiyorsanız auto-fit uygundur. Kart sayısı sütun sayısına eşit ya da fazlaysa ikisi aynı sonucu verir, çünkü boş iz kalmaz. Flexbox'ın kaydırma davranışıyla karşılaştırıldığında farkın bir yanı daha vardır: grid'de son satırda tek öğe kalsa bile öğe kendi hücresinde durur ve flexbox'taki gibi bütün satıra uzamaz; bu ayrım flexbox rehberi yazısındaki kaydırma örneğiyle karşılaştırılabilir.

Otomatik tekrarın kuralları

repeat() sayfası otomatik tekrara bazı kısıtlamalar koyar. Bunları bilmemek, bildirimin sessizce geçersiz sayılmasına yol açar:

• Yalnızca sabit boyutlar: auto-fill ve auto-fit içindeki izler <fixed-size> olmalıdır; yani bir uzunluk ya da yüzde veya en az bir ucu uzunluk ya da yüzde olan bir minmax(). repeat(auto-fill, 1fr) ya da tamamen içsel boyutlar geçersizdir.
• Tek bir otomatik tekrar: Bir değerde en fazla bir otomatik repeat() bulunabilir.
• Diğer tekrarlar da sabit olmalı: Otomatik tekrarın yanındaki başka repeat() çağrıları yalnızca sabit boyutlu biçimde olabilir.
• İç içe yazılamaz: Bir repeat() başka bir repeat() içine konamaz.

subgrid: kısa giriş

Normal bir iç içe grid, ebeveyn ızgaradan bağımsızdır; kendi izlerini tanımlar ve çizgileri ebeveynle hizalanmaz. grid-template-columns, grid-template-rows ya da ikisine birden subgrid değerini verdiğinizde iç ızgara yeni bir iz listesi oluşturmaz, ebeveynde kapladığı izleri kullanır. Örneğin ebeveynde beş sütun kaplayan bir öğe grid-template-columns: subgrid ile beş sütunlu bir alt ızgara olur ve sütun boyutları ebeveyninkilerle aynıdır.

.izgara {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}
.kart {
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  display: grid;
  grid-template-columns: subgrid;   /* ebeveynin 5 sütununu kullanır */
  grid-template-rows: subgrid;      /* ebeveynin 2 satırını kullanır */
  row-gap: 0;                       /* devralınan satır boşluğunu ezer */
}

MDN'in subgrid rehberinden öne çıkan davranışlar şunlardır:

• Boşluklar devralınır: Ebeveynin gap değerleri alt ızgaraya geçer, ama alt ızgarada farklı bir gap yazarak ezilebilir.
• Çizgi numaraları yeniden başlar: Alt ızgaranın içinde 1 numaralı çizgi, alt ızgaranın ilk çizgisidir; bileşen ızgaranın neresine konursa konsun numaralar aynı kalır.
• Çizgi adları aktarılır: Ebeveynin adlandırılmış çizgileri alt ızgarada kullanılabilir; alt ızgara subgrid [a] [b] biçiminde kendi adlarını da ekleyebilir.
• Subgrid yapılan eksende örtük grid yoktur: İki eksende de subgrid olan bir alt ızgaraya sığmayan fazladan öğeler yeni satır oluşturmaz, son ize yerleşir. Öğe sayısı belli değilse satırları subgrid yapmak yerine grid-auto-rows kullanın.

Sık yapılan hatalar

• repeat(auto-fill, 1fr) yazmak: Otomatik tekrar sabit bir boyut ister; minmax(200px, 1fr) kullanın.
• auto-fill ile auto-fit farkını yalnızca çok öğeyle test etmek: Fark yalnızca boş izler kaldığında görünür; az öğeyle de deneyin.
• 1fr sütunların eşit kalmasını beklemek: Otomatik en küçük değer yüzünden uzun içerik sütunu genişletir; minmax(0, 1fr) kullanın.
• Formda dense kullanmak: Görsel sıra ile odak sırası birbirinden kopar.
• minmax içinde fr'ı en küçük değer yapmak: fr yalnızca en büyük değer olabilir.

Sık Sorulan Sorular

Medya sorgusu olmadan duyarlı grid nasıl kurulur?

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) yazın. Sütun sayısı kapsayıcı genişliğine göre kendiliğinden değişir, her sütun en az 200 piksel olur ve kalan alan sütunlara paylaştırılır. Kapsayıcı genişliğine göre farklı stiller istiyorsanız container queries de bir seçenektir.

grid-auto-rows ile grid-template-rows arasındaki fark nedir?

grid-template-rows açık grid'in satırlarını tanımlar. grid-auto-rows ise bu satırlar yetmediğinde otomatik oluşturulan örtük satırların boyutunu belirler.

dense öğelerin kaynak sırasını değiştirir mi?

Yalnızca görsel olarak. Öğeler boşluklara taşınır, ama klavye gezinmesi ve sesli okuma kaynak sırasını izlemeye devam eder.

subgrid ile display: contents arasındaki fark nedir?

display: contents öğenin kendi kutusunu ortadan kaldırır ve çocuklarını doğrudan ebeveyn ızgaranın öğesi yapar; bu durumda öğeye arka plan ya da kenarlık veremezsiniz. subgrid ise öğenin kutusunu korur ve yalnızca iz boyutlarını ebeveynden alır. MDN'in erişilebilirlik rehberi ikisini de iç içe işaretlemeyi düzleştirmeden ızgaraya katmanın yolları olarak anar.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS grid rehberi · Grid alanları ve çizgi yerleşimi · flex-grow ve flex-basis · Container queries