Penempatan item grid

Penempatan berbasis garis grid dan perentangan item lintas track.

Daftar isi

Kisi grid menyediakan garis sebagai acuan penempatan yang lebih presisi daripada sekadar urutan alur. Topik ini membahas garis grid dan penomorannya, penempatan item melalui grid-column dan grid-row, kata kunci span, penamaan garis, serta perentangan item lintas track. Topik ditutup dengan pola nyata berupa kartu unggulan yang melebar dua kolom pada kisi catatan.

Garis grid sebagai acuan penempatan#

Garis grid adalah batas di antara track, dan penempatan berbasis garis menyasar garis tersebut, bukan selnya. Kisi dengan tiga kolom dan dua baris memiliki empat garis kolom serta tiga garis baris. Garis diberi nomor mulai dari 1 mengikuti arah penulisan, sedangkan nomor negatif dihitung dari ujung yang berlawanan, sehingga garis terakhir selalu bernomor -1.

Nomor garis kolom dan garis baris pada kisi 3 × 2

Diagram di atas menampilkan kisi 3 × 2 beserta nomor garisnya. Kolom pertama dibatasi garis kolom 1 dan 2, kolom kedua oleh garis 2 dan 3, sedangkan kolom ketiga oleh garis 3 dan 4. Kebiasaan membaca nomor garis ini menjadi dasar bagi seluruh properti penempatan pada bagian berikutnya.

Penempatan dengan grid-column dan grid-row#

Properti grid-column menentukan posisi awal dan akhir item pada sumbu kolom, sedangkan grid-row menentukannya pada sumbu baris. Nilainya ditulis sebagai pasangan garis yang dipisah garis miring, misalnya 1 / 3. Nilai pertama adalah garis tempat item mulai, sedangkan nilai kedua adalah garis tempat item berakhir, sehingga grid-column: 1 / 3 mencakup dua kolom pertama, bukan kolom ketiga.

css Contoh: item dari garis 1 sampai garis 3

.unggulan {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Item pada contoh di atas menempati dua kolom pertama pada baris pertama. Pasangan garis yang sama dapat ditulis dengan properti lengkapnya, yaitu grid-column-start dan grid-column-end, tetapi bentuk singkat grid-column lebih ringkas dan lebih lazim dipakai. Apabila hanya sumbu kolom yang dinyatakan, sumbu barisnya diisi otomatis mengikuti alur penempatan. Nomor negatif berguna bila item perlu menempel ujung kisi tanpa mengetahui jumlah tracknya, misalnya grid-column: 1 / -1 yang melintasi seluruh kolom. Apabila nilai akhir yang tertulis lebih kecil dari nilai awalnya, browser menukar keduanya, sehingga 3 / 1 menghasilkan penempatan yang sama dengan 1 / 3.

Kata kunci span dan garis bernama#

Kata kunci span menyatakan rentang tanpa perlu menghitung garis akhir. grid-column: span 2 membuat item mencakup dua track dimulai dari posisi otomatisnya, dan nilai awal boleh ditambahkan bila posisinya ingin ditentukan, misalnya 2 / span 2. Bentuk ini lebih tahan perubahan karena yang dinyatakan adalah banyaknya track, bukan nomor garisnya, sehingga templat kolom boleh diubah tanpa menyunting rentang itemnya.

Garis juga dapat diberi nama pada templat melalui tanda kurung siku. Nama yang berakhiran -start dan -end otomatis berpasangan dan dapat digunakan sebagaimana nomor garis. Nama pada contoh berikut menggunakan kata Indonesia agar mudah dikaitkan dengan perannya. Penamaan membuat deklarasi penempatan lebih mudah dibaca pada kisi yang tracknya banyak.

css Contoh: garis kolom bernama

.kisi {
  display: grid;
  grid-template-columns: [kiri] 1fr [tengah] 1fr [kanan];
}

.isi {
  grid-column: tengah / kanan;
}

Item .isi pada contoh di atas menempati kolom kedua karena mulai dari garis bernama tengah dan berakhir pada garis kanan. Nama garis bersifat opsional, dan nomor garis tetap berlaku pada kisi yang sama. Kedua bentuk acuan tersebut dapat dicampur dalam satu halaman sesuai kebutuhan.

Pola nyata: kartu unggulan pada kisi catatan#

Kisi catatan belajar berikut memuat satu kartu unggulan yang melebar dua kolom melalui grid-column: span 2, sedangkan kartu lain menempati satu sel. Item tanpa penempatan eksplisit tetap mengisi kisi secara otomatis, sehingga hanya kartu unggulan yang memerlukan deklarasi tambahan. Latar kartu unggulan dibuat berbeda agar rentangnya mudah terlihat.

Buka demo berikut dan amati baris pertamanya. Kartu unggulan memenuhi dua kolom pertama, satu kartu biasa menempati kolom ketiga, dan tiga kartu sisanya mengisi baris kedua. Menambahkan kartu baru pada berkas HTML tanpa mengubah CSS tetap menghasilkan kisi yang rapi karena pengisiannya otomatis.

Kode sumber demo

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kartu unggulan melebar dua kolom</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Catatan belajar</h1>
  <div class="kisi">
    <article class="kartu unggulan">
      <h2>Rangkuman cascade</h2>
      <p>Urutan sumber, specificity, dan inheritance bekerja bersama menentukan deklarasi yang menang.</p>
    </article>
    <article class="kartu">
      <h2>Inheritance</h2>
      <p>Properti color diwarisi ke elemen anak.</p>
    </article>
    <article class="kartu">
      <h2>Box model</h2>
      <p>border-box mencakup padding dan border.</p>
    </article>
    <article class="kartu">
      <h2>Satuan rem</h2>
      <p>rem mengikuti ukuran huruf akar.</p>
    </article>
    <article class="kartu">
      <h2>Pseudo-class</h2>
      <p>:hover menata keadaan pointer.</p>
    </article>
  </div>

<style>
/* Demo penempatan item: kartu unggulan melebar dua kolom */

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

h1 {
  font-size: 18px;
  margin: 0 0 16px;
}

.kisi {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.kartu {
  margin: 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.kartu h2 {
  margin: 0 0 6px;
  font-size: 14px;
}

.kartu p {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

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

</style>
<style>
/* Demo penempatan item: kartu unggulan melebar dua kolom */

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

h1 {
  font-size: 18px;
  margin: 0 0 16px;
}

.kisi {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.kartu {
  margin: 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.kartu h2 {
  margin: 0 0 6px;
  font-size: 14px;
}

.kartu p {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

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

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

Berkas CSS demo hanya menambahkan satu deklarasi penempatan, yaitu grid-column: span 2 pada selector .unggulan, sedangkan selektor kartu lainnya murni penataan visual. Pola seperti ini memisahkan peran penempatan dari peran penataan, sehingga perubahan rentang kartu unggulan cukup dilakukan pada satu baris. Apabila templatnya diubah menjadi empat kolom, kartu unggulan tetap melebar dua kolom tanpa penyesuaian apa pun.

Kesalahan umum#

Kesalahan pertama adalah membaca grid-column: 1 / 3 sebagai rentang dari kolom 1 sampai kolom 3, yang berarti tiga kolom. Nilai itu sesungguhnya berarti mulai pada garis 1 dan berakhir pada garis 3, sehingga rentangnya dua kolom. Angka pada properti penempatan adalah nomor garis, bukan nomor kolom, dan selisih satu ini menjadi sumber kebingungan yang paling sering muncul. Sebagai pembanding, kisi tiga kolom memiliki garis kolom hingga nomor 4, sehingga rentang seluruh kolom ditulis 1 / 4.

Kesalahan kedua adalah memberi dua item penempatan yang sama tanpa sengaja. Dua item yang menempati area yang sama akan bertumpuk, dan item yang muncul belakangan pada HTML menutupi item sebelumnya. Penumpukan semacam ini jarang diinginkan pada kisi kartu, sehingga penempatan eksplisit sebaiknya disimpan untuk item khusus seperti kartu unggulan saja, sedangkan kartu lain dibiarkan mengalir otomatis. Panel inspeksi pada browser membantu menemukan penumpukan tersebut, karena garis kisi beserta nomornya digambar pada saat halaman diperiksa.

Ringkasan#

Garis grid adalah batas antar track, dan kisi tiga kolom dua baris memiliki empat garis kolom serta tiga garis baris.
grid-column dan grid-row menerima pasangan garis awal dan akhir, sedangkan span menyatakan rentang tanpa nomor garis akhir.
Garis bernama melalui tanda kurung siku membuat deklarasi penempatan lebih mudah dibaca.
Kartu unggulan dapat direntangkan lintas track dengan satu deklarasi, sementara item lain tetap mengalir otomatis.

Referensi#

grid-column — MDN Web Docs — Dokumentasi properti penempatan kolom beserta kata kunci span dan nomor garis negatif.
grid-row — MDN Web Docs — Dokumentasi properti penempatan item pada sumbu baris kisi.
CSS Grid Layout Module Level 2 — CSS Working Group — Spesifikasi resmi yang mendefinisikan penempatan berbasis garis dan kata kunci span.