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

Sıradaki ders: Özet - Magazin düzeni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler