Digital Transformation
CSS Subgrid (Nilai display:subgrid pada Grid)
TL;DR: Subgrid adalah fitur CSS Grid yang membuat sub-elemen mewarisi track row atau column dari parent grid. Tanpa subgrid, menyelaraskan title, image, dan footer antar card butuh fixed height atau JS hack. Dengan subgrid, alignment otomatis konsisten. Baseline Web Platform sejak 2023, didukung semua browser modern.
Apa itu Subgrid?
Subgrid memungkinkan grid container anak mengikuti track row atau column parent-nya. Sebelum subgrid, child grid punya track sendiri yang tidak sinkron dengan parent. Akibatnya, di layout card grid yang isi nya bervariasi (judul 1 baris vs 3 baris), tinggi tiap section card jadi tidak rapi. Subgrid menyelesaikan ini secara deklaratif tanpa JavaScript.
Sintaks dasar:
.card-grid {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
Setiap card kini punya 4 row yang selaras dengan grid utama.
Kapan Subgrid Lebih Tepat dari Flexbox?
Subgrid unggul saat layout butuh alignment cross-row atau cross-column antar item berbeda parent. Flexbox tetap pilihan untuk layout 1-dimensi linear.
| Skenario | Pilihan Terbaik |
|---|---|
| Card dengan title + image + body + CTA selaras antar baris | Subgrid |
| Navigation bar horizontal | Flexbox |
| Form 2 kolom dengan label dan input rata kiri-kanan | Subgrid |
| Tag list yang wrap | Flexbox |
Lihat penerapan praktisnya bersama container queries dan css-has-selector untuk komposisi UI modern.
Kenapa Penting?
Bagi marketer Indonesia yang sering bangun landing page atau katalog produk, subgrid menghilangkan kebutuhan JavaScript untuk menyamakan tinggi elemen. Praktik di proyek client menunjukkan migrasi dari trik flexbox dengan min-height fixed ke subgrid memangkas CSS spesifik komponen 30-50 persen dan menghilangkan layout shift yang sebelumnya jadi sumber CLS tinggi. Data MDN Subgrid mencatat Baseline support sejak Q3 2023.
Pertanyaan Umum
Apakah subgrid sama dengan nested grid biasa?
Tidak. Nested grid punya track independen dari parent. Subgrid mewarisi track parent sehingga alignment otomatis sinkron.
Bagaimana fallback untuk browser yang tidak support?
Pakai @supports query. Fallback ke flexbox atau grid biasa dengan min-height jika subgrid tidak tersedia.
Istilah Terkait