Kurs önerisi:

CSS repeat() fonksiyonu

Tanım ve kullanım repeat() CSS

Fonksiyon, ağda bir grup sütun veya satırı tekrar etmek için kullanılır.

Bu fonksiyon, ağdaki satırlar veya sütunların çok fazla olması durumunda çok kullanışlıdır. Bu fonksiyon ile, kullanmak için bir 'tekrar kalıbı' oluşturabilirsiniz. grid-template-columns Özellikleri ve grid-template-rows Özellikler birlikte kullanılır.

Örnek

Örnek 1

Kullanarak repeat() Ağda bir grup sütun tekrar etmek için:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Kişisel olarak deneyin

Örnek 2

Kullanarak repeat() Ağda bir grup sütun tekrar etmek için:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Kişisel olarak deneyin

CSS grameri

repeat(repeat-count, tracks)
Değer Açıklama
repeat-counts

Gerekli. Sütun veya satırın tekrar etmesi gereken sayıyı belirtin.

1 veya daha büyük bir tamsayı olabilir veya anahtar kelimeler auto-fill veya auto-fit (bunlar ihtiyaç duyduğunda sütun/satır tekrarını doldurmak için kullanılır).
tracks

Gerekli. Tekrar eden sütun veya satır kümesini belirtin. Aşağıdaki değerlerden birini kullanabilirsiniz:

  • Uzunluk değerleri (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Adlandırılmış çizgiler

Teknik ayrıntılar

Sürüm: CSS Grid Layout Module Level 2

Tarayıcı desteği

Tablo içindeki rakamlar, bu işlevi ilk tam olarak destekleyen tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

İlgili sayfalar

İlgili:CSS grid-template-columns özelliği

İlgili:CSS grid-template-rows özelliği