Layout baru yang dibangun dengan CSS Subgrid

• 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 `` dan `
• ` 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 `
• ` di dalam `` 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 `
• ` 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 `` 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 `` 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

[GN⁺]

Komentar Hacker News

• Fitur subgrid memang sangat keren, tetapi pada contoh sederhana pertama, anak-anak juga bisa dibuat ikut dalam layout grid dengan ul { display: contents }
  Jika fitur subgrid tidak benar-benar diperlukan, cara ini lebih efisien

  • Benar untuk contoh itu, tetapi secara umum display: contents menghapus elemen UL sepenuhnya dari layout
    Jadi Anda tidak bisa menerapkan style atau menerima event UI pada elemen tersebut
    Jika ingin memakai UL sebagai area highlight atau bagian yang bisa di-scroll, subgrid jauh lebih berguna
  • Pada contoh kedua, untuk menjaga lebar gambar tetap konsisten, cukup gunakan unit selain fr, lalu pakai fr untuk teks agar mengisi sisa ruang

• Dulu saya benar-benar kesulitan karena tidak ada subgrid saat membuat UI perbandingan harga
  Menempatkan dua tabel berdampingan dan menyelaraskan barisnya itu mustahil
  Memang bisa diakali dengan tinggi tetap atau perhitungan JS, tetapi dalam struktur komponen React itu sangat tidak efisien

• Saya sempat berpikir apakah container queries bukan solusi yang lebih baik
  Tetapi untuk menjaga konsistensi seluruh grid, subgrid mungkin lebih cocok
  Sebagai referensi, contoh CodePen membuatnya lebih mudah dipahami

  • Container queries tidak menyelesaikan masalah merespons ukuran elemen saudara
    Selain itu, memakai container menciptakan stacking context baru sehingga merepotkan
    Sayang sekali subgrid dan container tidak bisa dipakai bersama. Jika anak bisa merujuk ukuran subgrid, hasilnya akan sangat kuat

• Muncul pikiran, “Jadi pada akhirnya kita kembali ke layout <table>?”

  • Bisa ya, bisa tidak. Dulu <table> adalah hack untuk memecahkan masalah, tetapi punya banyak keterbatasan aksesibilitas dan teknis
    Sistem Grid adalah alat untuk penataan visual, bukan tabel yang merepresentasikan struktur data
    Sekarang grid sudah menjadi standar, jadi saya berharap kita tidak terus membandingkannya dengan tabel
  • 25 tahun lalu, server otomatis merender tabel untuk membuat layout, dan saat itu memang mudah bekerja
    Tetapi desain responsif maupun aksesibilitas sama sekali tidak dipertimbangkan. Pada akhirnya kita seperti menemukan kembali tabel
  • Masalah <table> adalah bahwa ia merupakan struktur yang menjelaskan konten. Grid itu sendiri bukan masalah
  • Saya juga sudah lebih dari 20 tahun mendengar bahwa “tabel itu untuk data tabular”
    Pada akhirnya CSS hanya mengimplementasikan kembali fungsi itu dalam bentuk yang lebih baik

• Salah satu bug grid yang pernah saya alami adalah ketika elemen <img> diberi ukuran dalam persen, ukuran sel jadi terdistorsi ke ukuran asli gambar
  Itu terjadi baik di Firefox maupun Chromium, dan bug terkait ada di Mozilla Bug 1857365

  • Saya penasaran apakah masalah ini hilang jika gambar diberi atribut width/height tetap

• Agak disayangkan bahwa CSS kadang perlu menambahkan informasi struktur dokumen demi layout
  Misalnya, harus secara eksplisit menyebutkan jumlah baris

  • Idealnya, akan bagus jika ada cara menyelaraskan elemen meskipun induknya berbeda
    Atau jika satu kontainer flex bisa meniru distribusi kontainer lain
    Tetapi jika begitu, kemungkinan DX akan menjadi rumit

• Saya penasaran kenapa pada contoh kode ada style di file HTML dan CSS sekaligus
  Hanya dengan melihat CSS pada contoh subgrid pertama, saya lama mencari style apa yang diterapkan ke UL

• Muncul pikiran, “Jadi pada akhirnya kita kembali ke grid lagi?”
  Hal serupa juga pernah dilakukan pada era HTML dulu

  • Tetapi grid saat ini membuat desain responsif jauh lebih mudah
  • Tentu saja, sekarang ada efek samping berupa semakin banyak bug saat styling 😅

• Tulisan blog Josh selalu mengagumkan
  Kejelasan tulisannya, selera desainnya, sampai situs web yang interaktif, semuanya luar biasa

  • Saya juga pelanggan mailing list-nya. Saya selalu menantikan setiap tulisan baru terbit

• Secara pribadi, grid masih terasa tidak nyaman digunakan
  Sintaksnya terasa canggung dan naluri layout saya juga kurang cocok. Flexbox jauh lebih intuitif dan fleksibel

  • Kedua teknologi itu punya pendekatan masalah yang berbeda
    Flexbox berpusat pada konten, sedangkan Grid mengontrol ukuran dengan pendekatan berpusat pada kontainer
  • Saya juga kadang mencoba grid lagi, tetapi tetap merasa fitur yang saya inginkan masih kurang
    Konten tidak otomatis menyesuaikan di beberapa sumbu, dan semua harus ditempatkan secara manual
    Mungkin saya belum benar-benar memahami esensi grid, atau memang kurang cocok dengan jenis pekerjaan saya
  • Saat membuat desain responsif pun, flexbox terasa jauh lebih sederhana daripada grid