Repeat fonksiyonu

CSS kursu · Orta seviye · Ders 38/98

repeat() ile tekrarlayan sütun/satır tanımlarını öğrenirsin.

repeat() fonksiyonu

Aynı değeri tekrar tekrar yazmak yorucudur. repeat() fonksiyonu bu işi kısaltır: repeat(3, 1fr) demek, 1fr 1fr 1fr demektir. İlk değer tekrar sayısı, ikinci değer yinelenen boyuttur.

Fonksiyon tek başına da kullanılabilir, başka değerlerle yan yana da. grid-template-columns: 200px repeat(3, 1fr) yazarsan önce 200 piksellik bir sütun, ardından üç eşit esnek sütun oluşur. Uzun listeleri kısaltmanın en temiz yoludur.

auto-fill ve auto-fit

repeat() içine sabit sayı yerine auto-fill veya auto-fit yazabilirsin. Bunlar genellikle minmax() ile birlikte kullanılır ve sütun sayısını kapsayıcı genişliğine göre otomatik belirler.

auto-fill sütunları yerleştirir; boş kalanlar görünür boş hücre olarak kalır. auto-fit ise boş hücreleri çökerterek dolu hücreleri genişletir. Foto galerileri için auto-fit daha sık tercih edilir.

Uygulama Dört eşit sütunu repeat ile yaz

.products için display: grid ve grid-template-columns: repeat(4, 1fr) bildirimlerini ekle. Böylece dört eşit sütunlu bir ürün ızgarası oluşur.

Örnek çözümü göster

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Kendini test et

repeat(3, 1fr) ne üretir?
```
.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```
- 1fr 1fr 1fr (üç eşit sütun)
- 1fr 3 (tek sütun, 3fr genişlik)
- 3px 1fr (iki sütun)
- Üç ayrı ızgara kapsayıcısı
Cevabı göster

1fr 1fr 1fr (üç eşit sütun) — Doğru. repeat(3, 1fr) üç eşit 1fr sütun üretir; 1fr 1fr 1fr ile aynıdır.

Üç sütunu kısa yaz

.triptych {
  display: grid;
  grid-template-columns: ____;
}

Cevabı göster

.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

repeat() ifadesini açıklamasına eşle

repeat(3, 1fr)

Üç eşit sütun
repeat(4, 200px)

Dört sabit sütun
200px repeat(2, 1fr)

Sabit + iki esnek
repeat(auto-fit, 1fr)

Esnek sütun sayısı

Repeat fonksiyonu