CSS Subgrid: Penyelarasan Kolom Nested Induk

Selaraskan baris dan kolom elemen anak dengan jalur grid induk utama secara presisi menggunakan fitur modern grid-template-columns: subgrid.

Sebelum adanya Subgrid, konten di dalam kartu terpisah tidak bisa saling menyelaraskan tinggi header atau letak tombol bawah jika teksnya berbeda panjang. Subgrid mewariskan garis grid induk ke elemen anak bersarang.

.grid-induk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.kartu-anak {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* Mewariskan garis baris dari grid induk */
}