Fungsi repeat() CSS

Definisi dan penggunaan

CSS repeat() Fungsi digunakan untuk mengulangi grup kolom atau baris dalam grid.

Jika ada banyak baris atau kolom di grid Anda, fungsi ini sangat berharga. Dengan fungsi ini, Anda dapat membuat pola 'pengulangan' untuk digunakan.

Fungsi ini berfungsi untuk mengulangi grup kolom atau baris dalam grid. grid-template-columns Properti dan grid-template-rows Atur properti bersama-sama.

Contoh

Contoh 1

Gunakan repeat() Ulangi grup kolom dalam grid：

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

Coba sendiri

Contoh 2

Gunakan repeat() Ulangi grup kolom dalam grid：

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

Coba sendiri

Syntaks CSS

repeat(repeat-count, tracks)
Nilai Deskripsi
repeat-counts

Diperlukan. Tentukan jumlah kali kolom atau baris harus diulang.

Bisa berupa angka integer yang lebih besar dari 1, atau kata kunci auto-fill atau auto-fit (merepetisi kolom/baris untuk memenuhi kontainer grid).
tracks

Diperlukan. Tentukan kolom atau baris yang akan diulang. Dapat digunakan nilai berikut：

  • Nilai panjang (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Garis yang dinamai

Detil teknis

Versi： Modul Layout Grid CSS Level 2

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Halaman terkait

Referensi：Atribut grid-template-columns CSS

Referensi：Atribut grid-template-rows CSS