Subgrid

Kartu komponen adalah kasus klasik yang menggagalkan grid biasa: dua kartu berdampingan, masing-masing berisi judul, isi, dan kaki, tetapi panjang judulnya berbeda. Tanpa bantuan tambahan, kisi internal tiap kartu menghitung barisnya sendiri, sehingga garis batas antarbagian tidak sejajar antarkartu — kaki kartu satu lebih tinggi daripada kaki kartu dua. Fitur subgrid menyelesaikannya: sebuah grid item boleh memakai track grid induknya sebagai track internal sendiri. Fitur ini merupakan Baseline sejak 2023 dan dapat dipakai di seluruh browser utama.

Cara Kerja Subgrid #

Sebuah item grid yang juga diberi display: grid secara bawaan membentuk kisi baru yang independen. Dengan menulis grid-template-rows: subgrid, kisi internal item berhenti mendefinisikan ukuran barisnya sendiri dan mewarisi baris induk pada area yang dibentangnya. Syarat utamanya: item harus membentang lebih dari satu track induk, biasanya lewat grid-row: span 3 atau penempatan garis eksplisit seperti grid-row: 1 / 4.

Rangkaian deklarasi berikut adalah pola inti kartu seragam:

.papan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 48px 1fr 40px;
  gap: 12px;
  height: 260px;
}
.kartu {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

Papan induk merencanakan tiga baris: judul 48px, isi fleksibel, dan kaki 40px. Setiap kartu membentang ketiga baris itu dan mewarisi ukurannya. Akibatnya judul setiap kartu tepat 48px dan kaki setiap kartu tepat 40px, apa pun panjang teksnya — garis batas antarbagian otomatis sejajar antarkartu. Subgrid juga berlaku pada arah kolom (grid-template-columns: subgrid) dan pada kedua sumbu sekaligus.

Kasus di mana subgrid paling memberi manfaat:

• Kartu seragam: judul, isi, dan kaki sejajar antarkartu pada galeri produk maupun artikel.
• Formulir dua kolom: label pada kolom pertama dan input pada kolom kedua berbagi baris induk, sehingga tinggi baris menyesuaikan pesan galat terpanjang tanpa merusak baris lain.
• Timeline dan daftar ikon: nomor, ikon, atau stempel tanggal menempel pada baris yang sama dengan kontennya meski panjang teks berbeda-beda.

Progressive Enhancement #

Karena subgrid relatif baru dibanding fitur grid inti, pola defensifnya memakai @supports: sediakan fallback yang layak untuk browser lama, lalu naikkan ke subgrid bila didukung.

.kartu { grid-template-rows: auto 1fr auto; }
@supports (grid-template-rows: subgrid) {
  .kartu { grid-template-rows: subgrid; }
}

Pada browser tanpa subgrid, kartu tetap tersusun dengan tiga baris internalnya sendiri — hanya saja kaki antarkartu belum sejajar. Pada browser modern, deklarasi dalam @supports menggantikannya dengan versi yang sejajar sempurna.

Berikut HTML yang dipakai demo chapter ini:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Subgrid</title>
  <style>
    .papan {
      display: grid;
      width: 500px;
      height: 260px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 48px 1fr 40px;
      gap: 12px;
    }
    .kartu {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  </style>
</head>
<body>
  <div class="papan">
    <div class="kartu">
      <div class="judul">Judul ringkas</div>
      <div class="isi">Isi kartu pertama.</div>
      <div class="kaki">Kaki 1</div>
    </div>
    <div class="kartu">
      <div class="judul">Judul kartu kedua yang jauh lebih panjang</div>
      <div class="isi">Isi kartu kedua lebih banyak.</div>
      <div class="kaki">Kaki 2</div>
    </div>
  </div>
</body>
</html>

Hasil di Browser:

Dua kartu menempati tiga baris induk (48px, 1fr, 40px) masing-masing.
Computed grid-row kartu: "span 3"; computed display kartu: grid.
Judul pada kartu pertama dan kedua sama-sama setinggi 48px — baris
judul induk dipakai bersama. Kaki kedua kartu setinggi 40px dan berada
pada posisi vertikal yang sama persis.

Mari kita telaah deklarasi kuncinya:

1. Baris 9 (grid-template-rows: 48px 1fr 40px): induk yang mendefinisikan struktur. Baris 1 dan 3 tetap, baris 2 fleksibel mengisi tinggi 260px.
2. Baris 16 (grid-row: span 3): kartu membentang ketiga baris induk — syarat agar subgrid punya sesuatu untuk diwarisi.
3. Baris 17 (grid-template-rows: subgrid): kartu berhenti membuat baris sendiri. Judulnya mendarat di baris induk 1 (48px), isi di baris 2, kaki di baris 3 — sehingga computed height judul 48px dan kaki 40px pada kedua kartu.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi bentangan kartu (span 3), tampilan kartu sebagai grid, serta tinggi judul (48px) dan kaki (40px) yang sejajar antar kedua kartu.