Fungsi repeat()

Menulis 1fr 1fr 1fr masih relatif ringan, tetapi imajinasikan katalog dua belas kolom atau pola yang berulang enam kali — deklarasi akan panjang, berulang, dan rawan salah hitung. Fungsi repeat() menyelesaikan masalah pengulangan ini: ia menuliskan pola track sekali, lalu meminta browser mengulanginya sebanyak yang kita mau. Chapter ini membahas bentuk dasar repeat(), pengulangan lebih dari satu track, dan cara memanfaatkannya agar daftar track tetap mudah dibaca.

Bentuk Dasar repeat() #

Fungsi ini menerima dua argumen: jumlah pengulangan dan daftar track yang diulang.

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

Deklarasi di atas identik dengan grid-template-columns: 1fr 1fr 1fr. Tabel berikut memetakan beberapa bentuk yang sama seringnya kita temui:

Demo berikut memamerkan tiga pola dari tabel di atas — perhatikan nomor pada kotak untuk mengikuti urutan track:

repeat() bukan fitur baru terpisah, melainkan notasi ringkas yang diekspansi browser menjadi daftar track biasa — tiga deklarasi pendek, tiga karakter layout yang berbeda.

Mengulang Grup Track #

Argumen kedua repeat() boleh berisi lebih dari satu track — polanya diulang utuh:

.papan-strip {
  display: grid;
  grid-template-columns: repeat(3, 90px 40px);
  gap: 8px;
}

Grup 90px 40px diulang utuh tiga kali, dan gap tetap dijaga antar semua kolomnya. Grup ini bisa memuat kombinasi unit apa pun, misalnya repeat(2, 1fr 2fr 80px).

Dua batasan yang perlu diingat:

• repeat() tidak boleh bersarang — menulis repeat(repeat(...), ...) membuat deklarasi tidak valid sehingga seluruh aturan diabaikan.
• Satu deklarasi boleh memadukan repeat() dengan track tunggal, seperti 20px repeat(3, 1fr) 20px: bingkai tetap di kedua tepi dan tiga kolom fleksibel di tengah. Pola halaman ini akan sering kita pakai.

Kapan repeat() tidak cocok? Ketika daftar track benar-benar tidak berpola — misalnya 200px auto 340px — menuliskannya manual lebih jujur daripada memaksakan pengulangan yang tidak ada. repeat() adalah alat untuk pola, bukan pengganti rancangan track yang memang berbeda-beda.

Sistem Dua Belas Kolom #

Framework CSS era lampau melegakan grid dua belas kolom, dan repeat() mengubah pola itu menjadi satu kata:

.sistem-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

Kartu selebar separuh halaman nantinya cukup dibentangkan enam kolom lewat properti penempatan di bagian kedua section. Angka dua belas dipilih karena kelipatannya rapi: separuh, sepertiga, seperempat, dan seperenam semuanya hasil pembagian yang bulat.

Daftar Track yang Mudah Dibaca #

Manfaat terbesar repeat() sebenarnya di mata pembaca kode: jumlah kolom dan polanya terbaca dalam sekali lihat. Bandingkan repeat(12, 1fr) dengan dua belas nilai 1fr yang harus dihitung satu per satu. Kebiasaan yang sehat saat markup memakai pola grid yang sama di banyak tempat adalah menyimpan pola itu sebagai custom properties:

:root {
  --kolom-katalog: repeat(4, 1fr);
  --bingkai-halaman: 20px repeat(3, 1fr) 20px;
}

.katalog { grid-template-columns: var(--kolom-katalog); }
.halaman { grid-template-columns: var(--bingkai-halaman); }

Saat desain berubah — misalnya katalog pindah dari empat ke lima kolom — kita cukup menyunting satu deklarasi, dan semua class yang memakai pola tersebut ikut berubah.

Ringkasan #

repeat() menuliskan pola track satu kali dan meminta browser mengulanginya: satu argumen jumlah, satu argumen pola yang boleh berupa grup beberapa track. Fungsi ini juga boleh dipadukan dengan track tunggal untuk membentuk bingkai halaman, dan pola yang dipakai berulang layak disimpan sebagai custom properties agar mudah dirawat. Semua contoh di chapter ini masih menetapkan jumlah kolom secara manual; bagaimana kalau browser sendiri yang menghitungnya dari ruang tersedia? Chapter berikutnya membahas auto-fill dan auto-fit — pasangan kata kunci di balik kisi kartu responsif.