KAL
Menu

Penempatan otomatis dan dense

Pengaliran item otomatis, mode dense, dan pengelolaan gap pada kisi kartu.

Daftar isi

Item yang tidak diberi penempatan eksplisit tetap memperoleh tempat yang tertib melalui alur penempatan otomatis. Topik ini membahas properti grid-auto-flow beserta mode dense, masalah celah pada kisi yang kartunya berbeda rentang, biaya mode dense terhadap urutan visual, serta pengelolaan gap pada kisi kartu. Topik ditutup dengan pola nyata berupa galeri catatan berkartu unggulan yang bebas lubang.

Alur penempatan otomatis#

Proses pemberian tempat bagi item tanpa penempatan eksplisit disebut auto-placement, yakni penempatan otomatis oleh browser. Properti grid-auto-flow mengendalikan arah alurnya, dengan nilai bawaan row yang mengisi baris dari kiri ke kanan lalu lanjut ke baris berikutnya. Nilai column membalik arahnya, yaitu mengisi dari atas ke bawah lalu lanjut ke kolom berikutnya. Alur ini berlaku pula bagi item yang diberi rentang span tanpa garis awal, karena rentang semacam itu masih termasuk penempatan otomatis.

css Contoh: alur penempatan per kolom 
.kisi {
  display: grid;
  grid-template-rows: 80px 80px;
  grid-auto-flow: column;
}

Dengan alur column pada contoh di atas, item pertama menempati baris pertama kolom pertama, item kedua baris kedua kolom pertama, dan item ketiga pindah ke kolom kedua. Kursor penempatan, yakni penanda posisi item berikutnya, hanya bergerak maju pada alur bawaan, sehingga item yang datang belakangan tidak akan mengisi tempat kosong yang tertinggal di belakangnya. Perilaku inilah yang menimbulkan celah pada kisi tertentu. Celah semacam itulah yang disasar oleh nilai dense pada grid-auto-flow. Nilai dense yang ditulis tanpa arah dianggap row dense, sehingga kata row boleh ditinggalkan pada kisi yang alurnya memang baris.

Celah pada kisi dengan rentang berbeda#

Celah muncul ketika kisi memuat item berrentang berbeda, misalnya kartu unggulan yang mencakup dua kolom di antara kartu satu kolom. Apabila kartu yang direntangkan tidak muat pada sisa track baris yang sedang diisi, kartu itu pindah ke baris berikutnya dan menyisakan sel kosong pada baris di atas posisi barunya. Item berikutnya tidak menutup sel tersebut karena kursor penempatan sudah bergerak maju. Celah semacam ini mudah dikenali pada galeri berisi kartu unggulan, karena setiap kartu unggulan yang pindah baris berpotensi meninggalkan satu lubang di belakangnya.

Masalah serupa juga terjadi pada kisi yang kartunya bertinggi berbeda. Baris implisit mengikuti kartu tertinggi pada barisnya, dan kartu pendek pada baris lain meninggalkan ruang yang tampak seperti lubang. Celah semacam ini tidak merusak layout secara teknis, tetapi membuat kisi tampak berlubang dan ruang kontainer terbuang sia-sia. Mode dense menyasar kasus perentangan yang menimbulkan sel kosong di tengah kisi, sedangkan kasus tinggi yang berbeda lebih tepat diselesaikan dengan penyelarasan konten di dalam kartu.

Mode dense dan biayanya#

Nilai dense pada grid-auto-flow memerintahkan algoritme penempatan mundur ke awal kisi setiap kali ada item baru. Karena itu, sel kosong yang tertinggal di belakang boleh terisi oleh item kecil yang datang belakangan. Nilainya ditulis bersama arah alur, misalnya row dense. Dengan nilai itu, kisi yang sama dapat bebas lubang tanpa mengubah satu deklarasi penempatan item pun.

css Contoh: mengaktifkan mode dense 
.kisi {
  display: grid;
  grid-auto-flow: row dense;
}

Pengisian mundur ini membawa biaya pada urutan tampil. Kartu yang ditulis belakangan pada HTML dapat tampil lebih dulu karena melompat mengisi celah, sehingga urutan visual tidak lagi mengikuti urutan sumber dokumen. Navigasi keyboard dan screen reader mengikuti urutan sumber, sehingga perbedaan kedua urutan itu dapat membingungkan penggunanya. Biaya ini sifatnya penyajian semata, karena struktur HTML dan urutan dokumennya tetap tidak berubah.

Gap pada kisi kartu#

Properti gap menjadi pengatur jarak baku pada kisi kartu karena jaraknya konsisten pada kedua arah tanpa menyentuh tepi kontainer. Nilai yang umum berkisar antara 12 dan 24 piksel, dan kisi kartu yang rapat biasanya menggunakan satu nilai untuk kedua arah. Gap yang terlalu kecil membuat kartu sulit dibedakan, sedangkan gap yang terlalu besar menyisakan ruang mati di antara kartu. Satuan relatif seperti rem juga sah digunakan agar skala jaraknya mengikuti ukuran huruf halaman. Ruang gap ikut diperhitungkan sebelum sisa ruang dibagikan ke track fr, sehingga gap yang membesar mengecilkan setiap kartu.

Kartu yang menyimpan padding dan border sendiri tidak memerlukan margin tambahan untuk penjarakan antar kartu. Margin cukup digunakan di dalam kartu, misalnya antara judul dan ringkasan, sehingga tanggung jawab jarak terpisah rapi antara kontainer dan item. Disiplin ini juga memudahkan pengubahan tema jarak, karena cukup satu deklarasi gap pada kontainer yang disesuaikan. Kombinasi gap pada kontainer dan padding pada kartu menghasilkan kisi yang jarak antar selnya seragam di seluruh halaman.

Pola nyata: galeri catatan tanpa lubang#

Galeri catatan berikut memuat kartu unggulan berrentang dua kolom di antara kartu biasa. Bagian atas demo menggunakan alur row bawaan dan memperlihatkan satu sel kosong yang tertinggal, sedangkan bagian bawah menggunakan row dense pada kisi berisi kartu yang sama persis. Sel kosong pada kisi kedua terisi oleh kartu yang datang belakangan. Kedua kisi menempati lebar yang sama, sehingga perbedaan tampilannya murni berasal dari nilai grid-auto-flow.

Bandingkan kedua kisi pada demo berikut dan perhatikan posisi setiap kartunya. Kisi dense bebas lubang, tetapi urutan kartunya tidak sama persis dengan urutan penulisannya pada berkas HTML. Untuk galeri catatan yang urutannya tidak kaku, perbedaan tersebut merupakan kompromi yang wajar demi tampilan yang padat. Apabila urutan kartu benar-benar penting, solusinya bukan dense, melainkan penempatan eksplisit per item berdasarkan garis grid. Kedua keadaan itu dapat diuji ulang kapan saja dengan menambahkan atau menghapus kata dense pada berkas CSS demo.

Kode sumber demo
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Perbandingan alur row dan row dense</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>grid-auto-flow: row</h1>
  <div class="kisi">
    <article class="kartu">Cascade</article>
    <article class="kartu">Specificity</article>
    <article class="kartu lebar">Catatan unggulan</article>
    <article class="kartu">Box model</article>
    <article class="kartu">Satuan rem</article>
    <article class="kartu">Pseudo-class</article>
  </div>
  <h1>grid-auto-flow: row dense</h1>
  <div class="kisi padat">
    <article class="kartu">Cascade</article>
    <article class="kartu">Specificity</article>
    <article class="kartu lebar">Catatan unggulan</article>
    <article class="kartu">Box model</article>
    <article class="kartu">Satuan rem</article>
    <article class="kartu">Pseudo-class</article>
  </div>

<style>
/* Demo penempatan otomatis: alur row dan row dense */

body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
  background: #f1f5f9;
}

h1 {
  font-size: 15px;
  margin: 12px 0 8px;
  color: #334155;
}

.kisi {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.padat {
  grid-auto-flow: row dense;
}

.kartu {
  padding: 16px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}

.lebar {
  grid-column: span 2;
  background: #dbeafe;
  border-color: #1d4ed8;
}

</style>
<style>
/* Demo penempatan otomatis: alur row dan row dense */

body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
  background: #f1f5f9;
}

h1 {
  font-size: 15px;
  margin: 12px 0 8px;
  color: #334155;
}

.kisi {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.padat {
  grid-auto-flow: row dense;
}

.kartu {
  padding: 16px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}

.lebar {
  grid-column: span 2;
  background: #dbeafe;
  border-color: #1d4ed8;
}

</style></body>
</html>

Ringkasan#

  • grid-auto-flow mengendalikan alur penempatan otomatis, dengan nilai row, column, dan tambahan dense.
  • Item berrentang berbeda dapat menyisakan sel kosong karena kursor penempatan hanya bergerak maju.
  • Mode dense mengisi celah mundur dengan biaya urutan visual yang tidak lagi mengikuti urutan sumber.
  • gap menjadi penjarak baku kisi kartu, dan ruangnya diperhitungkan sebelum pembagian ruang fr.

Referensi#