cssgridresponsifMahir6 mnt baca

Grid Auto: Fill, Fit, Dense

auto-fill vs auto-fit dengan minmax(), dan grid-auto-flow dense untuk lubang layout.

Masalah: jumlah kolom responsif

Kamu ingin galeri yang otomatis punya 4 kolom di desktop, 2 di tablet, 1 di HP, tanpa menulis media query berlapis. Solusinya kombinasi auto-fill/auto-fit + minmax():

css

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

Bacanya: "buat kolom sebanyak mungkin, tiap kolom minimal 200px, selebihnya bagi rata (1fr)". Browser menghitung sendiri berapa kolom yang muat. Inilah pola galeri responsif paling populer di CSS modern.

auto-fill vs auto-fit: bedanya halus tapi penting

Keduanya mengisi kolom sebanyak muat, tapi berbeda saat ada ruang sisa:

auto-fill: mempertahankan trek kosong. Kalau hanya 3 item di ruang muat 5 kolom, 2 kolom kosong tetap dipesan (item tidak melebar).
auto-fit: melipat trek kosong. Kolom kosong dilipat sehingga item yang ada melebar mengisi ruang.

css

/* item tetap seukuran, ada ruang kosong di kanan */
.isi-sebagian { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* item melebar mengisi ruang yang tersedia */
.penuh { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

Aturan praktis: untuk galeri foto/produk yang jumlah itemnya dinamis, auto-fit biasanya terlihat lebih baik karena tidak ada ruang kosong menggantung.

minmax(): batas elastis

css

grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));

minmax(200px, 1fr) berarti "minimal 200px, maksimal bagi rata". Variasi min(250px, 100%) mencegah kolom minimum meluber di layar sangat sempit (lebih kecil dari 250px).

grid-auto-flow: dense

Saat item punya ukuran berbeda (ada yang span 2), algoritma penempatan default (row) bisa meninggalkan lubang: item besar tidak muat di sisa baris, baris berikutnya dimulai, menyisakan petak kosong.

css

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense; /* isi lubang dengan item kecil berikutnya */
}

dense menyuruh browser "menengok ke belakang" dan mengisi lubang dengan item kecil yang muat. Hasilnya rapat seperti masonry sederhana.

css

/* contoh lubang */
.item-besar {
  grid-column: span 2;
  grid-row: span 2;
}

Catatan teknis: dense mengubah urutan visual relatif terhadap urutan HTML (item kecil bisa melompat mendahului item besar). Untuk konten yang urutannya penting bagi screen reader (artikel, form), hindari dense. Untuk galeri foto, aman.

Tips profesional

Rumus andalan galeri: repeat(auto-fit, minmax(min(200px, 100%), 1fr)). Hafalkan.
auto-fill cocok untuk widget yang ukurannya harus konsisten; auto-fit untuk galeri yang harus penuh.
grid-auto-flow: dense + span acak = efek masonry sederhana tanpa library JavaScript.

Rangkuman

repeat(auto-fit, minmax(min, 1fr)) = galeri responsif tanpa media query. auto-fit melipat kolom kosong, auto-fill mempertahankannya. grid-auto-flow: dense menambal lubang dari item berukuran beda, dengan catatan urutan visual.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Uji Fill vs Fit

Pola auto-fit/minmax adalah cheat code galeri responsif. Memahami bedanya dengan auto-fill mencegah bug layout misterius.

Di playground:

Ganti auto-fit menjadi auto-fill, lalu hapus beberapa item (sisakan 3). Amati ruang kosong yang dipertahankan vs perilaku auto-fit.
Tambahkan grid-auto-flow: dense dan amati lubang di sekitar item besar tertambal.
Di komentar, tulis aturan kapan memilih auto-fit dan kapan auto-fill.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox