← CSS27 / 62

auto-fit: responsif tanpa media query

Ini salah satu baris CSS paling berguna yang akan kamu tulis: repeat(auto-fit, minmax(150px, 1fr)). Browser menghitung sendiri berapa kolom yang muat — banyak kolom di layar lebar, otomatis menyusut jadi satu kolom di HP. Nol media query. Pola ini sering membuat interviewer mengangkat kepala.

👀 Contoh dulu

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Hasilnya: Di layar 1000px muncul 4-5 kolom; di tablet jadi 2 kolom; di HP otomatis 1 kolom — tanpa media query sama sekali.

💡 auto-fit menghitung sendiri berapa kolom yang muat. Ini satu baris CSS yang menggantikan 3 media query.

📝 Sekarang giliranmu

Buat grid responsif otomatis: grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)).

Preview
← SebelumnyaBerikutnya →