Kolom dan baris templat

Deklarasi track yang eksplisit menentukan bentuk kisi sebelum item apa pun ditempatkan. Topik ini membahas properti grid-template-columns dan grid-template-rows, fungsi repeat() dan minmax(), perbedaan auto-fill dengan auto-fit, serta ukuran baris implisit melalui grid-auto-rows. Topik ditutup dengan pola nyata berupa kisi kartu yang jumlah kolomnya menyesuaikan lebar kontainer tanpa satu media query pun.

Definisi track eksplisit#

Properti grid-template-columns menerima satu nilai untuk setiap track kolom yang diinginkan, sehingga jumlah nilai sekaligus menentukan jumlah kolom. Properti grid-template-rows bekerja dengan cara yang sama untuk track baris. Nilainya dapat berupa satuan tetap seperti piksel, persentase, satuan fr, maupun kata kunci pengukuran lain, dan campuran satuan dalam satu deklarasi diperbolehkan.

.kisi {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 120px 120px;
}

Deklarasi di atas membentuk kisi tiga kolom sama lebar dengan dua baris setinggi 120 piksel. Track baris tidak wajib dideklarasikan, karena kisi yang hanya memiliki templat kolom akan membentuk baris mengikuti kebutuhan itemnya. Track baris tambahan itu bersifat implisit, dan pengaturan ukurannya dibahas pada bagian tentang grid-auto-rows.

Urutan nilai pada templat menentukan posisi track, sehingga 120px 1fr berbeda artinya dengan 1fr 120px. Templat pertama membentuk kolom sempit di kiri, sedangkan templat kedua membentuk kolom sempit di kanan. Kebiasaan membaca templat dari kiri ke kanan untuk kolom dan dari atas ke bawah untuk baris membantu menghindari tertukarnya urutan ini.

Fungsi repeat() dan minmax()#

Fungsi repeat() meringkas daftar track yang berulang. repeat(3, 1fr) menghasilkan templat yang sama dengan 1fr 1fr 1fr. Pola yang diulang boleh terdiri atas beberapa nilai sekaligus, misalnya repeat(2, 160px 1fr) yang membentuk empat kolom bergantian tetap dan fleksibel. Fungsi ini membuat templat panjang menjadi ringkas tanpa mengubah artinya.

Fungsi minmax() menetapkan batas minimum dan maksimum sebuah track. minmax(200px, 1fr) berarti kolom tidak akan lebih sempit dari 200 piksel, sedangkan sisa ruang dibagikan sebagai ruang fr. Fungsi ini menjembatani dua kebutuhan sekaligus, yaitu konten yang tidak boleh terlalu sempit dan layout yang tetap menyesuaikan lebar kontainer. Tetapkan batas minimumnya cukup besar agar konten tetap terbaca pada layar yang sempit.

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

Deklarasi di atas membentuk dua kolom yang masing-masing tidak lebih sempit dari 200 piksel dan sama besar melebihi batas itu. Apabila kontainer menyusut hingga dua kolom tidak muat lagi, kolom tetap tidak runtuh karena jumlahnya dinyatakan eksplisit. Kondisi seperti itulah yang ditangani oleh auto-fill pada bagian berikutnya.

auto-fill dan auto-fit#

Kata kunci auto-fill menggantikan angka pada repeat() dan menyuruh browser membentuk track sebanyak mungkin selama ukuran minimumnya masih muat. Deklarasi repeat(auto-fill, minmax(200px, 1fr)) pada kontainer selebar 900 piksel dengan gap 16 piksel membentuk empat kolom. Jumlah itu muncul karena empat kolom berukuran minimum beserta gapnya masih muat, sedangkan kolom kelima sudah tidak.

auto-fit bekerja sama saat track dibentuk, tetapi meruntuhkan track yang kosong setelah penempatan selesai. Track kosong menyusut menjadi nol, sehingga item yang ada membagi seluruh lebar kontainer. Perbedaan keduanya hanya terlihat ketika jumlah item lebih sedikit daripada jumlah kolom yang muat, sebagaimana dirangkum tabel berikut.

Kisi arsip yang kartunya terus bertambah cocok menggunakan auto-fill, karena ruang kosong hari ini akan terisi besok tanpa perubahan ukuran kartu. Halaman dengan jumlah kartu tetap, misalnya tiga kelompok kategori, lebih pas menggunakan auto-fit agar kartunya memanfaatkan lebar penuh. Keduanya menghasilkan tampilan yang sama ketika jumlah item sudah mengisi seluruh kolom yang tersedia.

Track implisit dengan grid-auto-rows#

Track yang tidak tercantum pada templat disebut track implisit, yaitu track yang terbentuk karena item melebihi track eksplisit yang tersedia. Ukuran bawaan track implisit mengikuti konten, sehingga baris tambahan dapat tidak seragam dengan baris di atasnya. Properti grid-auto-rows memberi ukuran seragam bagi track implisit tersebut.

.kisi {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 120px 120px;
  grid-auto-rows: 120px;
}

Dengan tambahan grid-auto-rows: 120px, baris ketiga dan seterusnya setinggi baris eksplisit di atasnya, sehingga kisi tetap rapi ketika jumlah item bertambah melewati templat. Padanannya untuk arah kolom adalah grid-auto-columns, yaitu pengatur ukuran kolom implisit pada kisi yang alurnya per kolom. Kombinasi auto-fill untuk kolom dan grid-auto-rows untuk baris menjadi resep yang lazim pada kisi kartu.

Item yang tidak muat lagi pada track eksplisit juga tetap diberi tempat di baris implisit, sehingga kisi tidak pernah memotong item karena kehabisan track. Ukuran grid-auto-rows yang sama dengan baris eksplisit menjaga perbedaan itu tidak terlihat oleh pengguna. Tanpa pengatur tersebut, baris tambahan berukuran mengikuti konten dan kisi tampak tidak seragam.

Pola nyata: kisi kartu tanpa media query#

Kisi kartu adaptif merupakan pemanfaatan auto-fill yang paling umum. Satu deklarasi repeat(auto-fill, minmax(160px, 1fr)) menghasilkan kisi yang jumlah kolomnya menyesuaikan lebar kontainer, dari satu kolom pada layar sempit hingga beberapa kolom pada layar lebar, tanpa satu pun media query.

Demo berikut membandingkan auto-fill dengan auto-fit pada dua kisi berisi tiga kartu yang sama. Kisi auto-fill mempertahankan kolom kosong, sedangkan kisi auto-fit meruntuhkannya sehingga ketiga kartunya melebar. Ubah lebar panel pratinjau dan amati titik ketika jumlah kolom berkurang, karena kedua kisi bereaksi pada lebar minimum yang sama. Apabila jumlah kartunya ditambah hingga mengisi semua kolom, tampilan kedua kisi menjadi identik.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Perbandingan auto-fill dan auto-fit</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>auto-fill</h1>
  <div class="kisi isi-fill">
    <article class="kartu">Catatan satu</article>
    <article class="kartu">Catatan dua</article>
    <article class="kartu">Catatan tiga</article>
  </div>
  <h1>auto-fit</h1>
  <div class="kisi isi-fit">
    <article class="kartu">Catatan satu</article>
    <article class="kartu">Catatan dua</article>
    <article class="kartu">Catatan tiga</article>
  </div>

<style>
/* Demo kolom dan baris templat: auto-fill versus auto-fit */

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

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

.kisi {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

.isi-fill {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.isi-fit {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

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

</style>
<style>
/* Demo kolom dan baris templat: auto-fill versus auto-fit */

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

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

.kisi {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

.isi-fill {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.isi-fit {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

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

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

Ringkasan#

• grid-template-columns dan grid-template-rows menentukan jumlah serta ukuran track eksplisit, dan campuran satuan diperbolehkan.
• repeat() meringkas track berulang, sedangkan minmax() menetapkan batas minimum dan maksimum sebuah track.
• auto-fill mempertahankan kolom kosong, sedangkan auto-fit meruntuhkannya sehingga item yang tersisa melebar.
• grid-auto-rows memberi ukuran seragam bagi track implisit yang terbentuk saat item melebihi templat.

Referensi#

• grid-template-columns — MDN Web Docs — Dokumentasi properti templat kolom, termasuk satuan fr dan kata kunci auto-fill.
• repeat%28%29 — MDN Web Docs — Dokumentasi fungsi perulangan track beserta auto-fill dan auto-fit.
• minmax%28%29 — MDN Web Docs — Dokumentasi fungsi batas minimum dan maksimum untuk ukuran track.
• grid-auto-rows — MDN Web Docs — Dokumentasi ukuran track baris implisit.