Layout nyata jarang berhenti pada satu tingkat: di dalam kartu ada judul, isi, dan baris aksi yang juga ingin tersusun rapi. Kabar baiknya, setiap grid item boleh menjadi grid container sendiri — cukup beri display: grid padanya. Grid di dalam grid ini disebut nested grid, dan track-tracknya dihitung mandiri, terpisah dari grid induknya. Pada chapter ini kita membangun kartu ber-grid internal, lalu mengenal subgrid, fitur yang mengizinkan grid anak meminjam track dari induknya agar isi antar kartu bisa segaris.

Item Grid Menjadi Grid Container #

css 
.papan-proyek {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.kartu-tugas {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
}

Mari kita telaah:

  1. .papan-proyek adalah grid induk: tiga kolom untuk tiga kartu.
  2. .kartu-tugas berperan ganda: ia adalah item bagi papan, sekaligus container bagi isinya.
  3. grid-template-rows: auto 1fr auto menyusun isi kartu menjadi tiga baris: judul mengikuti kontennya, area isi menyerap sisa tinggi, dan footer aksi menempel di dasar.
  4. Track tidak saling mewarisi: kolom papan tidak memengaruhi baris kartu; ukuran track kartu dihitung dari konten kartu itu sendiri.

Karena item grid melar setinggi barisnya secara default (align-items: stretch), kartu dalam satu baris sama tinggi — dan 1fr di dalam kartu menyerap sisa ruangnya.

Demo berikut menampilkan tiga kartu tugas; judul kartu tengah sengaja dibuat panjang hingga melipat dua baris — perhatikan akibatnya pada posisi awal teks isi:

Setiap kartu menghitung track internalnya sendiri, tanpa koordinasi dengan kartu tetangga.

Subgrid: Meminjam Track dari Induk #

Nested grid biasa sudah menyelesaikan banyak kasus. Namun bila kita ingin batas-batas internal semua kartu membentuk garis lurus — judul semua kartu sama tinggi, isi semua kartu mulai di titik yang sama — kita butuh subgrid:

css 
.papan-proyek {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* tiga baris untuk isi kartu */
}

.kartu-tugas {
  display: grid;
  grid-row: span 3;            /* kartu membentang tiga baris induk */
  grid-template-rows: subgrid; /* baris internal = baris milik induk */
}

Kini tiga baris internal kartu bukan miliknya sendiri, melainkan baris milik papan induk: baris judul diukur dari judul terpanjang, sehingga isi semua kartu mulai di titik yang sama dan footer membentuk satu garis lurus. Subgrid juga tersedia untuk kolom lewat grid-template-columns: subgrid, dan gap dari track induk yang dipinjam ikut diwariskan. Subgrid berstatus Baseline Widely available sejak pertengahan 2026 dan didukung seluruh browser modern, sehingga aman dipakai pada layout produksi.

Kapan Nested, Kapan Subgrid #

  • Nested biasa: struktur internal tiap kartu unik dan tidak perlu segaris antar kartu.
  • Subgrid: elemen sejenis antar kartu harus membentuk garis lurus, misalnya judul atau footer.
  • Trik lama yang bisa ditinggalkan: mengunci tinggi elemen dengan angka pasti; subgrid menggantikannya dengan ukuran yang tetap mengikuti konten.

Ringkasan #

Grid item bisa menjadi grid container, sehingga kartu, panel, dan komponen kecil punya track internalnya sendiri yang dihitung mandiri. Bila keselarasan antar kartu dibutuhkan, subgrid mengizinkan grid anak memakai track milik induknya. Selanjutnya kita menggabungkan teknik-teknik section ini ke dalam pola yang paling sering kita temui di toko daring: deretan kartu produk responsif.