- CSS Subgrid adalah fitur yang melampaui batasan Grid lama dengan memungkinkan struktur grid induk diperluas hingga ke elemen DOM turunan
- Sebelumnya, hanya anak langsung yang bisa berpartisipasi dalam grid, tetapi dengan subgrid, struktur bertingkat seperti
<ul> dan <li> juga bisa memakai penempatan sel grid yang sama
- Ini membantu mengatasi ketidakseimbangan antar elemen saudara akibat perbedaan panjang konten, sekaligus mendukung susunan layout yang membuat tiap kartu atau seksi merespons secara dinamis
- Namun, ada hal yang perlu diperhatikan seperti masalah reservasi baris, penomoran ulang garis, dan ketidakcocokan dengan fluid grid berbasis auto-fill
- Sudah didukung di browser utama, dan karena bisa diadopsi secara bertahap, teknologi ini berpotensi besar meningkatkan fleksibilitas desain UI ke depan
Konsep dasar Subgrid
- Pada CSS Grid awal, hanya elemen anak langsung yang bisa ikut dalam layout
- Sebagai contoh, pada UI portofolio, gambar
<li> di dalam <ul> pada dasarnya terikat dalam satu sel
- Dengan
grid-template-rows: subgrid dan grid-template-columns: subgrid, definisi baris dan kolom dari grid induk bisa diwariskan
- Tiap
<li> bisa ditempatkan langsung ke sel grid induk sehingga struktur HTML yang semantik dan perataan visual tetap terjaga sekaligus
- Hasil yang sama juga bisa dibuat dengan Flexbox dan Grid bertingkat, tetapi subgrid menawarkan pendekatan yang lebih ringkas lewat berbagi satu struktur grid yang sama
Kemungkinan layout baru
- Pada contoh kartu portofolio, tiap
<article> memiliki grid 2 kolom untuk menempatkan gambar dan teks
- Unit
fr bersifat fleksibel, tetapi karena tiap kartu menghitung secara independen, bisa muncul ketidakseimbangan lebar kolom
- Jika
grid-template-columns: subgrid diterapkan, rasio kolom grid induk akan dibagikan ke semua kartu
- Saat konten seperti panjang judul berubah, seluruh grid akan menyesuaikan ulang secara otomatis
- Dengan cara ini, kita bisa membangun layout yang saling menyadari antar elemen saudara
- Contoh: jika judul “Infinite Supercomputer” dipendekkan, rasio gambar dan teks di seluruh kartu akan langsung ikut menyesuaikan
Hal yang perlu diperhatikan saat memakai Subgrid (Gotchas)
Reservasi ruang baris
- Berbagi kolom terasa intuitif, tetapi saat berbagi baris, perlu reservasi baris secara eksplisit
- Contoh: pada kartu tabel harga, agar item di tiap
<ul> sejajar pada baris yang sama, jumlah baris perlu ditentukan dengan grid-row: span N
- Secara default, subgrid hanya menempati satu sel, jadi jika ingin memakai beberapa baris, area grid induk harus diperluas terlebih dahulu
Penomoran grid bertingkat
- Subgrid mewarisi template baris dan kolom dari induk, tetapi nomor garis akan diatur ulang
- Misalnya, meski mewarisi garis 2 sampai 5 dari induk, di dalamnya tetap akan dinomori ulang menjadi 1 sampai 4
- Karena tiap grid punya indeksnya sendiri, nomor garis tidak bertindak sebagai ID unik, melainkan indeks relatif
Ketidakcocokan dengan fluid grid
- Fluid grid berbentuk
repeat(auto-fill, minmax()) tidak bisa dipakai bersama subgrid
- Subgrid membutuhkan jumlah kolom yang sudah ditentukan, dan tidak mendukung
auto-fill maupun auto-fit
- Penulis menyebutkan bahwa ia belum menemukan solusi untuk kombinasi tersebut
Dukungan browser lama
- Sudah didukung browser utama sejak 2023, tetapi tingkat dukungannya masih di bawah 90%
- Dengan kondisi
@supports not (grid-template-columns: subgrid), kita bisa menyediakan layout pengganti
- Contoh: mengusulkan struktur fallback yang menempatkan gambar dan teks dalam tumpukan vertikal
Contoh nyata dan kesimpulan
- Situs pengembang Stripe (stripe.dev) menyusun seluruh halaman sebagai satu grid besar, lalu memakai beberapa lapisan subgrid untuk penempatan yang rinci
- Subgrid berguna bukan hanya untuk layout skala besar, tetapi juga penyesuaian UI skala kecil
- Bisa diadopsi secara bertahap tanpa perlu merombak seluruh proyek
- Sebagai sarana baru untuk memperoleh fleksibilitas layout CSS, subgrid punya nilai tinggi untuk dieksplorasi secara eksperimental
Belum ada komentar.