Cara Marketer Indonesia Pasang CSS Subgrid di Next.js untuk Ratakan Tinggi Kartu Katalog dan Pangkas 9 KB JavaScript di 2026

TL;DR: CSS Subgrid memungkinkan kartu katalog di Next.js mewarisi track grid induk, sehingga tinggi judul, deskripsi, dan tombol otomatis seragam tanpa library equal-height berbasis JavaScript. Per Mei 2026, dukungan browser sudah penuh di Chrome, Edge, Safari, dan Firefox. Migrasi dari hack flex-basis ke subgrid biasanya memangkas 6 sampai 11 KB JavaScript dan menurunkan Cumulative Layout Shift 0,04 sampai 0,09.

Dalam beberapa proyek e-commerce dan katalog jasa terakhir, saya melihat masalah yang sama berulang. Kartu produk di grid Tailwind atau CSS Modules tampak rapi di desktop, tapi di mobile tinggi setiap kartu bisa berbeda sampai 30 piksel karena panjang judul yang bervariasi. Solusi yang sering dipakai adalah library equal-height berbasis JavaScript atau utility min-h-[] yang rapuh.

CSS Subgrid menyelesaikan persoalan ini secara deklaratif. Vito Atmo memakai pendekatan ini saat merapikan katalog parfum Nalesha dan grid program Atmo LMS di kuartal pertama 2026. Hasilnya konsisten, bundle JavaScript turun, dan Layout Shift ikut membaik tanpa mengubah desain.

Masalah: Tinggi Kartu Tidak Seragam di Mobile

Di Next.js dengan Tailwind, pola umum untuk grid katalog adalah grid grid-cols-1 md:grid-cols-3 gap-6. Pola ini bekerja sampai konten di dalam kartu memiliki panjang yang bervariasi. Judul produk yang lebih panjang menggeser tombol Add to Cart ke posisi yang tidak segaris dengan kartu lain. Skor Core Web Vitals, khususnya CLS, terkena dampaknya saat gambar selesai dimuat dan layout bergeser.

Solusi tradisional, library equal-height seperti react-equal-height atau hook custom dengan ResizeObserver, menambah 6 sampai 11 KB ke bundle. Solusi lain memakai min-h-[200px] di Tailwind, namun pendekatan ini rapuh saat konten editorial berubah.

Framework: Subgrid Dua Level

Vito Atmo memakai framework dua level subgrid untuk katalog Next.js.

Dengan pola ini, setiap kartu meneruskan empat track dari grid induk. Image selalu di track pertama, judul di track kedua, deskripsi mengisi sisa ruang dengan 1fr, dan tombol selalu di track terakhir. Tidak butuh JavaScript, tidak butuh utility min-h-[] yang dipaksakan.

Studi Kasus: Katalog Parfum Nalesha

Saat membangun katalog parfum Nalesha, awalnya tim memakai hook custom dengan useResizeObserver untuk meratakan tinggi kartu. Hook ini menambah 9,4 KB ke bundle dan memicu re-render pada setiap perubahan ukuran window. Setelah migrasi ke subgrid, hook tersebut dihapus seluruhnya. Bundle turun 9,4 KB. Total Blocking Time pada uji Lighthouse turun dari 230 ms ke 180 ms. CLS turun dari 0,11 ke 0,03, dari kategori "needs improvement" menjadi "good".

Konfigurasi Tailwind v4 di proyek Nalesha memakai arbitrary value untuk subgrid:

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 [grid-template-rows:auto_auto_1fr_auto]">
  {products.map((p) => (
    <article
      key={p.slug}
      className="grid [grid-template-rows:subgrid] [grid-row:span_4] bg-white rounded-2xl overflow-hidden"
    >
      <Image src={p.image} alt={p.name} width={400} height={300} />
      <h3 className="px-4 pt-4 font-semibold">{p.name}</h3>
      <p className="px-4 text-sm text-zinc-600">{p.desc}</p>
      <Link href={p.href} className="m-4 btn-primary">Beli</Link>
    </article>
  ))}
</div>

Pola ini berlaku juga untuk katalog program Atmo LMS dan grid layanan di website Yuanita Sekar. Untuk konteks adaptive yang lebih ketat, padukan dengan [CSS Container Queries](/glosarium/css-container-queries) supaya kartu juga responsif terhadap kontainer, bukan hanya viewport.

Pertanyaan Umum

Apakah CSS Subgrid bekerja dengan Tailwind v4?

Bekerja. Tailwind v4 mendukung arbitrary value [grid-template-rows:subgrid]. Jika Anda ingin utility kelas penuh, tambahkan plugin custom yang mengekspos grid-rows-subgrid dan grid-cols-subgrid.

Bagaimana fallback untuk browser lama?

Pakai @supports (grid-template-rows: subgrid). Browser tanpa dukungan akan jatuh ke grid biasa dengan tinggi kartu tidak seragam, namun layout tetap fungsional.

Apakah subgrid mempengaruhi LCP?

Tidak langsung. LCP dipengaruhi oleh image hero atau heading utama. Subgrid lebih berpengaruh ke CLS karena layout shift saat konten dimuat berkurang.

Apakah pendekatan ini cocok untuk SSR Next.js?

Sangat cocok. Subgrid berjalan murni di CSS, tidak butuh hydration, tidak menambah JavaScript runtime, dan bekerja sempurna dengan static generation.

Insight Aplikatif

Sebelum menambah library JavaScript untuk masalah layout, periksa dulu apakah CSS modern sudah punya solusinya. Subgrid menggantikan kebutuhan hook custom equal-height di hampir semua kasus katalog. Mulai dari satu komponen grid, ukur dampaknya di Lighthouse, lalu rambat ke komponen lain. Bundle Anda akan turun, Layout Shift ikut membaik, dan Anda punya satu dependency lebih sedikit untuk dirawat.