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