Digital Transformation
CSS Subgrid (Property grid-template-rows: subgrid)
TL;DR: CSS Subgrid adalah ekstensi CSS Grid memakai nilai
subgridpadagrid-template-columnsataugrid-template-rowsyang membuat elemen anak meneruskan track dari grid induk. Per Mei 2026, dukungan sudah penuh di Chrome, Edge, Safari, dan Firefox sejak 2023. Fitur ini menggantikan trik margin manual dan flex hack yang biasa dipakai untuk merapikan kartu produk, form bertingkat, dan dashboard multi-kolom.
Apa itu CSS Subgrid?
CSS Subgrid memungkinkan grid container anak menyalin definisi track dari grid induk, sehingga elemen di dalamnya tetap segaris dengan grid global tanpa perlu mendefinisikan kolom ulang. Tanpa subgrid, layout kartu produk dengan tinggi heading, deskripsi, dan tombol yang seragam membutuhkan JavaScript atau pseudo-element hack. Fitur ini sering dipadukan dengan CSS Container Queries untuk komponen yang adaptif terhadap ukuran kontainer.
Analogi sederhana: bayangkan tabel kerja yang dipakai banyak tim. Subgrid seperti aturan agar setiap sub-tabel anak otomatis pakai lebar kolom yang sama dengan tabel utama, tidak perlu mengukur ulang setiap kali.
Cara Pakai
| Property | Fungsi |
|---|---|
grid-template-columns: subgrid | Mewarisi kolom dari grid induk |
grid-template-rows: subgrid | Mewarisi baris dari grid induk |
grid-column: span N | Menentukan rentang span anak terhadap track induk |
gap | Tetap bisa di-override di subgrid |
Contoh pemakaian umum: kartu produk dengan tiga bagian (judul, ringkasan, tombol). Tanpa subgrid, ketiganya harus diukur manual. Dengan subgrid, cukup deklarasikan display: grid; grid-template-rows: subgrid; grid-row: span 3; pada kartu, dan ketiga elemen di dalamnya langsung selaras dengan kartu lain di baris yang sama.
Kenapa Penting?
Untuk marketer Indonesia yang menjalankan landing page bisnis dan katalog produk, subgrid mengurangi dependency pada JavaScript hanya untuk meratakan tinggi elemen. Saat Vito Atmo merapikan grid kartu artikel di salah satu proyek personal branding di Maret 2026, migrasi dari flex-hack ke subgrid memangkas 8 KB JavaScript yang sebelumnya dipakai library equal-height. Skor Core Web Vitals ikut membaik karena layout shift saat gambar selesai dimuat berkurang.
Konteks lokal: banyak template Tailwind dan WordPress Indonesia masih bergantung pada utility min-h-[] manual yang rapuh saat konten berubah. Subgrid menyelesaikan kelemahan ini dengan pendekatan deklaratif.
Pertanyaan Umum
Apakah subgrid menggantikan CSS Grid biasa?
Tidak. Subgrid melengkapi grid biasa untuk skenario layout bertingkat. Grid biasa tetap dipakai untuk struktur utama.
Bagaimana fallback browser lama?
Pakai @supports (grid-template-columns: subgrid) untuk progressive enhancement. Browser tanpa dukungan akan jatuh ke layout grid mandiri.
Istilah Terkait