Grid Template Columns dan Rows

Setelah container grid berdiri, langkah berikutnya adalah merancang struktur kisi yang kita inginkan: berapa kolom, berapa baris, dan seberapa lebar masing-masing. Pasangan properti grid-template-columns dan grid-template-rows menjawab pertanyaan itu dengan daftar nilai yang dipisahkan spasi — setiap nilai adalah satu track (jalur) dan urutannya menentukan posisi track di kisi. Pada Chapter ini kita memakai satuan panjang sederhana (px) agar hubungan antara deklarasi dan hasil di layar terlihat langsung, lalu membedah perbedaan track eksplisit dan implicit. Satuan fr yang lebih fleksibel mendapat bahasan tersendiri pada Chapter berikutnya.

Menulis Daftar Track #

grid-template-columns menerima daftar ukuran untuk kolom, misalnya 100px 200px 300px. Browser membaca nilai pertama sebagai lebar kolom 1, nilai kedua sebagai kolom 2, dan seterusnya. Aturan yang sama berlaku untuk grid-template-rows pada arah baris. Tiga penulisan berikut menghasilkan kisi yang identik:

.kisi-a { grid-template-columns: 100px 200px 300px; }
.kisi-b { grid-template-columns: 100px 200px 300px; grid-template-rows: 80px; }
.kisi-c { grid-template-columns: 100px 200px 300px; grid-template-rows: 80px 80px; }

Perbedaan ketiganya ada pada rencana baris: kisi pertama tidak merencanakan baris (semua baris implicit), kisi kedua merencanakan satu baris 80px, dan kisi ketiga dua baris. Jumlah track eksplisit tidak membatasi jumlah item — item keempat pada kisi tiga kolom tetap ditempatkan, hanya saja ia turun ke baris baru.

Beberapa hal yang perlu dipegang saat menulis daftar track:

Track Eksplisit versus Implicit #

Track eksplisit adalah track yang ukurannya kita deklarasikan; track implicit terbentuk saat item melebihi jumlah track eksplisit. Contohnya, kisi dua kolom tanpa deklarasi baris akan membentuk baris baru setiap kali dua item terisi — semua baris itu implicit. Ukuran default track implicit adalah auto (mengikuti konten), dan kita mengubahnya lewat grid-auto-rows untuk baris atau grid-auto-columns untuk kolom.

Pembedaan ini penting karena dua deklarasi bekerja pada kelompok track yang berbeda: grid-template-rows hanya berlaku untuk baris yang direncanakan, sedangkan grid-auto-rows hanya berlaku untuk baris tambahan. Bila keduanya ditulis, baris eksplisit memakai ukuran template dan baris keempat, kelima, dan seterusnya memakai ukuran auto.

Berikut HTML yang dipakai demo chapter ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Grid Template Columns dan Rows</title>
  <style>
    .kisi-kolom {
      display: grid;
      grid-template-columns: 100px 200px 300px;
    }
    .kisi-baris {
      display: grid;
      grid-template-columns: 150px 150px;
      grid-template-rows: 80px 120px;
      grid-auto-rows: 40px;
    }
    .kisi-kolom > div  { border: 1px solid rgb(59, 130, 246); background: rgb(219, 234, 254); }
    .kisi-baris > div  { border: 1px solid rgb(22, 163, 74); background: rgb(220, 252, 231); }
  </style>
</head>
<body>
  <div class="kisi-kolom">
    <div>Kolom 1</div>
    <div>Kolom 2</div>
    <div>Kolom 3</div>
    <div>Kolom 1, baris 2</div>
  </div>
  <div class="kisi-baris">
    <div>Baris 1</div>
    <div>Baris 1</div>
    <div>Baris 2</div>
    <div>Baris 2</div>
    <div>Baris 3 (implicit)</div>
    <div>Baris 3 (implicit)</div>
    <div>Baris 4 (implicit)</div>
  </div>
</body>
</html>

Hasil di Browser:

Kisi pertama (tiga kolom 100px, 200px, 300px): item pertama selebar
100px, item kedua 200px, item ketiga 300px. Item keempat turun ke
baris kedua dan berada di kolom pertama, sehingga lebarnya kembali
100px.
Kisi kedua (dua baris eksplisit 80px dan 120px, grid-auto-rows 40px):
item pada baris eksplisit kedua setinggi 120px; item yang meluber ke
baris implicit pertama hanya setinggi 40px.

Mari kita telaah deklarasi pentingnya:

1. Baris 7 (grid-template-columns: 100px 200px 300px): tiga kolom eksplisit dengan lebar berbeda. Item yang di-auto-place ke kolom mana pun akan mengikuti lebar kolom tersebut — inilah alasan item pertama dan item keempat sama-sama 100px.
2. Baris 12–13 (.kisi-baris): dua kolom 150px ditemani dua baris eksplisit (80px dan 120px) serta grid-auto-rows: 40px untuk semua baris tambahan.
3. Tujuh item pada kisi kedua: empat item pertama mengisi baris eksplisit; tiga item terakhir meluber ke baris implicit yang setinggi 40px, bukan 80px atau 120px.

Nilai track tidak harus px: kita dapat memakai persen, auto, min-content, max-content, dan fr. Satuan fr yang mendistribusikan ruang sisa dibahas tuntas pada Chapter Fr Unit , sedangkan bentuk repeat() yang meringkas daftar panjang ada pada Chapter Repeat dan Minmax.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi lebar item pada tiga kolom pertama (100px, 200px, 300px), tinggi item pada baris eksplisit kedua (120px), dan tinggi item pada baris implicit pertama (40px).