Grid ile duyarlı düzen

auto-fit ve minmax ile duyarlu ızgara kurarsın.

auto-fit ve minmax ile duyarlı ızgara

Bir ızgarayı önceden sabit sütun sayısı vermeden, her sütunun en az ve en çok genişliğini belirterek de kurabilirsin. repeat(auto-fit, minmax(200px, 1fr)) bildirimi ekran genişliğine göre sütunları otomatik dizer: 200 piksel sığan kadar sütun açar.

Böylece ızgara dar ekranda tek sütuna iner, geniş ekranda yan yana açılır; media query yazmadan duyarlı çalışır.

minmax() fonksiyonu

minmax(min, max) fonksiyonu bir sütunun en küçük ve en büyük genişliğini birlikte belirler. minmax(150px, 1fr) her sütunun en az 150 piksel, varsa açıkta kalan alanı paylaşacak kadar geniş olmasını söyler.

Bu, eski sabit piksel ya da saf 1fr yazımlarına göre daha akıllıdır: sütun ne çok daralır ne de gereksiz büyür.

auto-fit ile auto-fill farkı

İki değer de ızgaraya sığan sütun sayısını hesaplar; farkı boş sütunlara yaklaşımdır. auto-fit boş sütunları daraltıp dolu sütunlara yer bırakır; auto-fill boş sütunları yerinde korur.

Sonuç olarak auto-fit ile dolu sütunlar ekrana yayılır; auto-fill ile sütunlar belirlenen genişlikte kalır. Çoğu duyarlı kart ızgarası auto-fit kullanır.

Uygulama Duyarlı galeri ızgarası kur

.gallery ızgarası sığan kadar sütun açsın. Her sütun en az 200 piksel olsun ve açıkta kalan alanı paylaşsın (1fr). Yalnızca grid-template-columns bildirimini yaz; display: grid'i koru.

Örnek çözümü göster

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

Kendini test et

repeat(auto-fit, minmax(200px, 1fr)) ne yapar?
```
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
```
- Sabit 200 piksel tek sütun
- Her sütun 200 piksel sabit, esnemez
- İki sütunlu sabit ızgara
- Sığan kadar 200 piksel sütun
Cevabı göster

Sığan kadar 200 piksel sütun — Doğru. auto-fit sığan sayıda sütun açar; minmax her birini en az 200 piksel, açıkta kalanı paylaşacak şekilde tutar.

Duyarlı ızgara için anahtar kelime

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

Cevabı göster

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

Izgara değerini anlamıyla eşleştir

minmax(150px, 1fr)

En az 150 piksel, esnek üst
auto-fit

Boş sütunları daralt
auto-fill

Boş sütunları koru
repeat(3, 1fr)

Sabit üç sütun

Sıradaki ders: Flex ile duyarlı düzen

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler