CSS Grid Lanjut Subgrid Masonry Implicit Tracks Auto Flow

Definisi

Selain grid-template, Grid punya fitur lanjut: subgrid (child mengikuti track parent), masonry (experimental, tata letak bata), dan implicit tracks (grid-auto-rows/grid-auto-flow) untuk item tak dijadwalkan eksplisit.

Kapan dipakai

• subgrid: alignment kolom/baris nested (form, card list) agar sejajar dengan parent.
• implicit tracks: saat jumlah item dinamis; biarkan Grid buat baris baru otomatis.
• masonry: galeri dengan tinggi tak seragam (belum stabil di semua browser — cek support).

Cara kerja

Subgrid

css

.parent { display: grid; grid-template-columns: 1fr 2fr; }
.child { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }

Implicit rows

css

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense; /* isi celah */
}

Masonry (eksperimental)

css

.grid { display: grid; grid-template-rows: masonry; }

Struktur alur

Catatan implementasi

• subgrid butuh parent punya track eksplisit di axis yang diwarisi.
• grid-auto-flow: dense bisa mengubah urutan visual demi mengisi celah — hati-hati urutan logis.
• Masonry masih eksperimental; gunakan JS fallback atau column-count untuk produksi aman.
• minmax() di auto-rows sering lebih baik dari nilai tetap.

Kesalahan umum

• Subgrid tanpa parent track: tidak mengikuti apa-apa.
• Auto-flow dense acak: urutan item berubah, bingung UX.
• Mengandalkan masonry: layout rusak di browser tak support.
• Terlalu banyak explicit line: pakai span dan auto-flow lebih fleksibel.

Referensi terkait

• CSS Grid Layout: Tracks, Areas, Auto-placement, minmax, fr
• CSS Flexbox vs Grid
• CSS Responsive Layout: Media Queries, Container Queries