Minmax fonksiyonu
minmax() ile esnek sütun/satır boyutlarını öğrenirsin.
minmax(): esnek sütun boyutu
minmax() fonksiyonu bir sütun veya satırın en küçük ve en büyük boyutunu aynı anda belirler. minmax(200px, 1fr) ifadesi 'en az 200px, açıkta kalanı paylaş' demektir.
Böylece sütunlar daraldığında 200px'in altına inmez; genişlediğinde de orantılı büyür. Bu, duyarlı kart ızgaraları için ideal bir tekniktir.
min ve max değerleri
minmax() iki değer alır: ilki minimum, ikincisi maksimum. İkisi de px, %, em veya fr birimi alabilir; ancak fr yalnızca maksimum olabilir.
minmax(100px, 300px) sütunu 100-300px arasına sabitler; minmax(0, 1fr) ise sütunun sıkışmasına izin verir. Bu ikinci yazım, taşmaları önlemek için kullanılır.
Duyarlı kart ızgarası
Bir ürün listesinde her kartın en az 200px geniş olmasını, aynı zamanda ekrana sığmasını istersin. repeat(3, minmax(200px, 1fr)) üç sütun kurar; dar ekranda her sütun 200px'e iner, taşma olmaz.
Bu yazım, media query kullanmadan duyarlı davranır. Kartlar ekrana göre yer değiştirir; sabit piksel düzeninden çok daha esnektir.
Uygulama Esnek kart ızgarası kur
Bir .cards ızgarasında 3 sütun tanımla. Her sütun en az 200px ve açıkta kalanı paylaşır (1fr). repeat() fonksiyonunu kullan. Yalnızca grid-template-columns bildirimini yaz.
Örnek çözümü göster
.cards {
grid-template-columns: repeat(3, minmax(200px, 1fr));
}Kendini test et
-
minmax(200px, 1fr) ne yapar?
.cards { grid-template-columns: repeat(3, minmax(200px, 1fr)); }- En az 200px, açıkta kalanı paylaşır
- Tam 200px sabit genişlik verir
- En çok 200px, en az 1fr verir
- 200px ile 1fr arasında rastgele seçer
Cevabı göster
En az 200px, açıkta kalanı paylaşır — Doğru. İlk değer minimum, ikinci değer maksimumdur; 1fr açıkta kalanı paylaşır.
-
Esnek sütunu tamamla
.cards { grid-template-columns: repeat(3, ____); }Cevabı göster
.cards { grid-template-columns: repeat(3, minmax(200px, 1fr)); } -
minmax örneğini anlamıyla eşleştir
- minmax(200px, 1fr)
- En az 200px, paylaşır
- minmax(100px, 300px)
- 100px ile 300px arası
- minmax(0, 1fr)
- Sıkışabilir, paylaşır
- minmax(auto, auto)
- İçeriğe göre