Auto Placement

Item yang tidak kita tempatkan secara eksplisit tetap harus berada di suatu tempat dalam kisi. Browser mengaturnya lewat algoritma auto placement: setiap item tanpa posisi diisi ke sel kosong berikutnya mengikuti arah alur (flow) yang dideklarasikan pada grid-auto-flow . Chapter ini membedah cara browser menelusuri kisi, perilaku bawaan row, mode dense yang mengisi kembali lubang, dan konsekuensi keduanya terhadap urutan visual. Pemahaman ini penting karena banyak layout “berantakan tak terduga” pada grid sebenarnya adalah perilaku auto placement yang bekerja sesuai aturan.

Pengisian Sel Baris demi Baris #

Mode bawaan adalah grid-auto-flow: row. Browser memakai penunjuk posisi (placement cursor) yang dimulai dari baris 1 kolom 1, lalu berjalan maju untuk setiap item: satu kolom ke kanan, dan pindah baris saat kolom habis. Urutan DOM menjadi urutan pengisian — item ketiga pada kisi tiga kolom berakhir di kolom 3 baris 1, dan item keempat turun ke baris 2 kolom 1.

Bila item memiliki penempatan sebagian (misalnya grid-column: span 2), algoritma tetap melanjutkan dari posisi penunjuk: bila bentangan tidak muat di baris saat ini, item dipindah ke baris berikutnya. Sifat penting mode bawaan: penunjuk tidak pernah mundur. Akibatnya, item berbentangan besar yang tidak muat meninggalkan lubang di belakangnya, dan lubang itu dibiarkan kosong.

Mode Dense: Mengisi Lubang #

grid-auto-flow: row dense mengubah satu aturan: sebelum menempatkan setiap item, penunjuk dikembalikan ke awal kisi dan algoritma mencari sel kosong terawal yang dapat menampung item. Item kecil dapat dengan demikian “mundur” mengisi lubang yang tertinggal di baris-baris sebelumnya. Hasilnya kisi lebih padat tanpa ruang menganggur — pola ini yang dipakai galeri foto dan dashboard dengan kartu berbentangan bervariasi.

Konsekuensinya juga perlu disadari: urutan visual tidak lagi mengikuti urutan DOM. Item kelima bisa tampil di depan item kedua. Untuk konten yang dibaca berurutan (artikel, daftar langkah), mode dense justru merusak alur baca; mode ini paling cocok untuk konten setara seperti koleksi gambar.

Berikut HTML yang dipakai demo chapter ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Auto Placement</title>
  <style>
    .urut { display: grid; grid-template-columns: 100px 200px 300px; }
    .sparse, .dense { display: grid; width: 450px; grid-template-columns: 100px 150px 200px; grid-auto-rows: 50px; }
    .sparse { grid-auto-flow: row; }
    .dense  { grid-auto-flow: row dense; }
    .a { grid-column: 1 / 3; }
    .b { grid-column: span 2; }
    .c { grid-column: span 3; }
  </style>
</head>
<body>
  <div class="urut">
    <div>Satu</div><div>Dua</div><div>Tiga</div><div>Empat</div>
  </div>
  <div class="sparse">
    <div class="a">A</div><div class="b">B</div><div class="c">C</div><div class="d">D</div>
  </div>
  <div class="dense">
    <div class="a">A</div><div class="b">B</div><div class="c">C</div><div class="d">D</div>
  </div>
</body>
</html>

Hasil di Browser:

Kisi urutan (kolom 100px, 200px, 300px): item "Tiga" menempati kolom 3
baris 1 sehingga computed width 300px; item "Empat" turun ke baris 2
kolom 1 dan lebarnya 100px.
Kisi sparse: item A membentang garis 1-3, item B dan C tidak muat di
baris 1 sehingga turun; item D auto-placement berakhir di baris 4
kolom 1 (computed width 100px), menyisakan lubang di baris 1 kolom 3.
Kisi dense dengan item yang sama: D dipindah mengisi lubang baris 1
kolom 3, sehingga computed width 200px dan kisi tidak punya sel kosong.

Mari kita telaah penempatan item A, B, C, D baris demi baris:

1. Item A (.a, grid-column: 1 / 3): ditempatkan mulai garis kolom 1 hingga garis 3 pada baris 1 — lebar 250px (100px + 150px).
2. Item B (.b, span 2): dari posisi penunjuk (baris 1 kolom 3) bentangan dua track tidak muat, sehingga B pindah ke baris 2 kolom 1–2. Penunjuk kini di baris 2 kolom 3.
3. Item C (.c, span 3): tidak muat di baris 2, sehingga menempati seluruh baris 3.
4. Item D (auto): pada kisi sparse, penunjuk berada di baris 4 — D menumpuk di bawah C (100px). Pada kisi dense, pencarian diulang dari awal dan D ditempatkan di lubang baris 1 kolom 3 (200px).

Demo chapter ini memuat penanda uji otomatis yang memverifikasi lebar item hasil pengisian baris demi baris (300px dan 100px), posisi item D pada kisi sparse (100px), serta posisi item D yang mengisi lubang pada kisi dense (200px).