← CSS26 / 62

repeat() dan minmax()

repeat(3, 1fr) lebih ringkas daripada menulis 1fr tiga kali. minmax(200px, 1fr) berarti 'jangan lebih sempit dari 200px, tapi silakan melebar'. Kombinasi keduanya adalah fondasi grid responsif. repeat() juga menerima susunan campuran seperti repeat(2, 1fr) 200px, berguna ketika kolom terakhir harus berlebar tetap.

👀 Contoh dulu

/* panjang */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* sama artinya, lebih ringkas */
grid-template-columns: repeat(4, 1fr);

/* dengan batas minimum */
grid-template-columns: repeat(4, minmax(80px, 1fr));

Hasilnya: Empat kolom sama lebar. Versi minmax menjamin tiap kolom tidak pernah lebih sempit dari 80px.

💡 repeat(jumlah, ukuran) dan minmax(minimum, maksimum) — dua fungsi yang paling sering dipakai di Grid.

📝 Sekarang giliranmu

Buat 2 kolom dengan grid-template-columns: repeat(2, minmax(100px, 1fr)).

Preview
← SebelumnyaBerikutnya →