Debugging Grid dengan DevTools

Grid mengatur baris dan kolom sekaligus, sehingga satu kesalahan kecil — satu grid-area yang salah tulis atau satu item tanpa posisi eksplisit — dapat menggeser banyak sel sekaligus. DevTools menyediakan overlay Grid yang paling kaya informasi di antara semua overlay layout: nomor garis, ukuran track, dan nama area digambar langsung di atas halaman. Pada chapter ini kita belajar menyalakan dan membaca overlay itu, lalu memakainya untuk tiga diagnosis khas grid: kejutan auto-placement, kemunculan track implisit, dan item yang menumpuk di sel yang sama.

Overlay Grid: Nomor Garis, Track, dan Area #

Cara menyalakannya sama persis dengan flexbox: cari badge grid di panel Elements pada elemen dengan display: grid, klik untuk menyalakan overlay; atau buka panel Layout (Chrome) / tab Layout (Firefox) dan centang container yang ingin digambar. Overlay-nya menampilkan tiga lapis informasi:

Panel Layout juga mencantumkan seluruh grid container di halaman — berguna saat grid bersarang, karena kita bisa menyalakan overlay untuk satu container saja dan membacanya terpisah dari induknya. Kebiasaan yang membantu: pilih satu item, lalu bandingkan angka grid-column dan grid-row di panel Computed dengan nomor garis yang tampak di overlay.

Kejutan Auto-Placement #

Item tanpa grid-area maupun grid-column/row ditempatkan algoritme auto-placement: browser mencari sel kosong pertama mengikuti arah baris. Kejutannya muncul ketika sebagian item sudah berposisi eksplisit — kursor penempatan bisa terlewat ke posisi yang tidak kita duga, bahkan membuat baris baru. Bila hasilnya terlihat melompati sel yang seharusnya terisi, periksa di overlay: sel kosong yang tampak justru dilewati oleh algoritme, dan item yang “salah tempat” biasanya sedang ditempatkan sesuai aturan bawaan, bukan sesuai niat kita.

Pertanyaan pendamping: dari mana baris atau kolom ekstra berasal? Grid eksplisit hanya sebesar template yang kita tulis; sel di luar itu membentuk implicit grid, dengan tinggi barisnya dikendalikan grid-auto-rows — default auto, mengikuti konten. Jika overlay menampilkan baris yang tidak ada di grid-template-areas, cari item tanpa area, lalu beri area resmi atau kunci ukuran baris implisitnya:

.dasar-papan {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-auto-rows: 48px;   /* baris implisit muncul dengan tinggi seragam */
}

Mekanisme eksplisit versus implisit sudah dibahas tuntas pada chapter Implicit dan Explicit Grid; di sini overlay berperan sebagai alat hitungnya.

Diagnosis Item Menumpuk #

Dua item boleh menempati sel yang sama — grid tidak mencegahnya. Gejala umumnya: satu kartu tertutup kartu lain, atau teks bertindih. Penyebabnya hampir selalu salah satu dari tiga ini:

Urutan dokumen menentukan siapa yang tampak di atas saat menumpuk; jika perlu mengatur ulang, gabungkan dengan z-index — dan ingat aturannya dari chapter Positioning: item grid adalah salah satu pengecualian yang boleh memakai z-index tanpa harus di-position.

Demo berikut adalah papan dashboard mini. Template hanya mendefinisikan tiga area dan dua baris, tetapi markup membawa lima kartu — dua di antaranya membawa kejutan:

Kartu yang muncul lebih belakang di dokumen menggambar paling atas, dan baris ketiga itu adalah track implisit yang tingginya berasal dari grid-auto-rows. Inilah yang akan dibaca overlay-nya:

1. Nomor garis: kolom menampilkan garis 1–3, tetapi baris menampilkan garis 1–4 — dua baris eksplisit plus satu baris implisit.
2. Nama area: overlay menggambar label sider, judul, dan isi sesuai template, dan tidak ada label untuk kartu rekap.
3. Item menumpuk: pilih kartu isi dan kartu notifikasi bergantian; panel Computed menampilkan grid-area yang sama persis untuk keduanya.

Perbaikannya mengikuti diagnosis: beri kartu rekap area resmi dan pindahkan notifikasi ke area sendiri:

.papan-demo {
  grid-template-areas: "sider judul" "sider isi" "rekap rekap";
}
.kartu-notifikasi {
  grid-area: rekap; /* tidak lagi menumpuk kartu isi */
}
.kartu-rekap {
  grid-area: rekap;
}

Ringkasan #

Overlay Grid DevTools menampilkan nomor garis, ukuran track, dan nama area langsung di atas halaman, dengan panel Layout sebagai meja kendali untuk menyalakannya per container. Tiga diagnosis khasnya: kejutan auto-placement yang dapat dilacak lewat sel kosong yang terlewat, track implisit yang tingginya dikendalikan grid-auto-rows, dan item menumpuk yang terbukti lewat perbandingan grid-area di panel Computed. Dibanding flexbox, grid lebih mudah di-debug justru karena lebih eksplisit — selama kita membiasakan diri membaca garis, bukan menebak sel. Berikutnya kita kembali ke tema cascade: alur kerja DevTools untuk membaca konflik specificity secara terpadu.