Repeat dan Minmax

Menulis grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr sah secara sintaks, tetapi panjang, rawan salah hitung, dan sulit diubah. Fungsi repeat() meringkas pengulangan tersebut menjadi repeat(6, 1fr), sedangkan fungsi minmax() memberi setiap track batas bawah dan batas atas ukuran. Kedua fungsi ini adalah pasangan standar dalam grid modern: hampir semua galeri kartu responsif memakai kombinasi repeat(auto-fill, minmax(...)) yang akan kita bedah di sini. Chapter ini juga menyiapkan pemahaman untuk Chapter Auto-fit dan Auto-fill yang membandingkan dua mode pengulangan otomatis secara khusus.

Bentuk repeat() #

repeat(<jumlah>, <daftar track>) mengulang daftar track sebanyak jumlah yang diberikan. Nilai pertama dapat berupa bilangan bulat positif, atau kata kunci auto-fill/auto-fit yang menghitung jumlah track otomatis dari lebar wadah:

.enam   { grid-template-columns: repeat(6, 1fr); }
.campur { grid-template-columns: 200px repeat(3, 1fr) 200px; }
.berulang { grid-template-columns: repeat(2, 100px 150px); }
.isi-berulang { grid-template-columns: repeat(3, 1fr 2fr); }

Baris kedua menunjukkan bahwa repeat() dapat berdampingan dengan nilai lain dalam satu daftar. Baris ketiga mengulang sebuah grup: repeat(2, 100px 150px) menghasilkan empat kolom — 100px, 150px, 100px, 150px. Baris keempat mengulang daftar berisi lebih dari satu nilai, sehingga repeat(3, 1fr 2fr) setara enam kolom dengan pola bergantian.

Mode auto-fill menghitung berapa track yang muat dalam wadah. Dengan repeat(auto-fill, minmax(150px, 1fr)) pada wadah 600px, browser menjawab “berapa kali 150px muat dalam 600px” — jawabnya empat — lalu membagi ruang sama rata ke empat track tersebut.

Bila wadah memakai column-gap, hitungan itu ikut memperhitungkannya: browser mengecek apakah jumlah × minimal + (jumlah − 1) × gap masih muat. Wadah 600px dengan column-gap: 20px hanya memuat tiga track (3 × 150px + 2 × 20px = 490px, sedangkan empat track memerlukan 660px), sehingga galeri dengan gap besar otomatis berpindah ke jumlah kolom yang lebih sedikit. Perhitungan ini berjalan ulang setiap kali wadah berubah ukuran — tanpa media query.

Batas Ukuran dengan minmax() #

Fungsi minmax(min, max) mendeklarasikan satu track dengan ukuran minimal dan maksimal. Browser menggunakan nilai di antara keduanya: track tidak akan lebih kecil dari min dan tidak perlu lebih besar dari max. Beberapa kombinasi yang lazim:

Kombinasi pertama adalah resep paling populer untuk galeri kartu: kartu tetap terbaca minimal 150px, dan bila wadah lebih lebar, setiap kartu ikut melebar membagi sisa ruang. Perlu diingat syarat mode otomatis: auto-fill dan auto-fit hanya dapat dipakai bila ukuran track yang diulang memakai minmax() — browser tidak bisa menghitung jumlah pengulangan dari ukuran yang tidak memiliki batas minimal yang pasti.

Berikut HTML yang dipakai demo chapter ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Repeat dan Minmax</title>
  <style>
    .kisi-a { display: grid; width: 600px; grid-template-columns: repeat(3, 1fr); }
    .kisi-b { display: grid; width: 600px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .kisi-c { display: grid; width: 600px; grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    .kisi-a > div, .kisi-b > div, .kisi-c > div {
      border: 1px solid rgb(59, 130, 246); background: rgb(219, 234, 254);
    }
  </style>
</head>
<body>
  <div class="kisi-a"><div>A1</div><div>A2</div><div>A3</div></div>
  <div class="kisi-b"><div>B1</div></div>
  <div class="kisi-c"><div>C1</div><div>C2</div><div>C3</div></div>
</body>
</html>

Hasil di Browser:

Kisi A — repeat(3, 1fr) pada 600px: computed grid-template-columns
"200px 200px 200px"; setiap item selebar 200px.
Kisi B — repeat(auto-fill, minmax(150px, 1fr)) pada 600px: terbentuk
empat kolom, computed grid-template-columns "150px 150px 150px 150px";
item tunggal menempati kolom pertama selebar 150px.
Kisi C — repeat(3, minmax(150px, 1fr)) pada 600px: tiga kolom masing-
masing 200px, di atas batas minimal 150px.

Mari kita telaah baris deklarasi yang menentukan:

1. Baris 7 (repeat(3, 1fr)): bentuk paling ringkas dari 1fr 1fr 1fr; 600px dibagi tiga menghasilkan kolom 200px.
2. Baris 11 (repeat(auto-fill, minmax(150px, 1fr))): browser menghitung floor(600 / 150) = 4 track. Keempatnya berukuran 150px karena tidak ada ruang sisa — dan item yang hanya satu tetap menempati kolom pertama selebar 150px, menyisakan tiga kolom kosong.
3. Baris 15 (repeat(3, minmax(150px, 1fr))): jumlah track tetap tiga, tetapi setiap track punya batas minimal 150px. Pada 600px, fraksi (200px) berada di atas batas itu, sehingga hasilnya sama dengan kisi A.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi computed grid-template-columns ketiga kisi beserta lebar item pertamanya.