Di halaman collection sebuah toko klien, area kartu produk tiba-tiba tampil menciut di desktop. Bukan sekadar sempit, tapi benar-benar kecil, sekitar 240px, terjepit di sisi kiri layar sementara sisa lebar halaman kosong melompong. Klien terus melapor dengan kalimat yang sama: "kartu produk kecil banget." Saya buka DevTools, saya inspect CSS produk, dan tidak ada yang salah. Tidak ada max-width aneh, tidak ada flex-basis yang kecil, tidak ada width yang di-hardcode. Semua yang saya cari tampak benar, tapi hasilnya tetap salah.
Refleks pertama saya jelek, seperti biasa. Saya kira ada media query yang bocor, atau container query yang salah breakpoint, atau mungkin ada !important dari plugin yang menimpa lebar kartu. Saya matikan satu per satu rule yang mencurigakan di panel Styles. Tidak ada yang menggerakkan angka 240px itu barang sepiksel pun. Kartu tetap keras kepala menempel di lebar itu, seolah 240px adalah takdirnya.
Kenapa ini terjadi
Baru setelah saya berhenti melihat CSS kartu dan mulai melihat container-nya, semuanya klik. Layout halaman itu adalah grid dua kolom:
.layout {
display: grid;
grid-template-columns: 240px 1fr;
}
.sidebar {
display: none;
}Angka 240px itu bukan lebar kartu. Itu lebar track pertama grid, track yang seharusnya ditempati sidebar. Dan di sinilah jebakannya. Sidebar adalah anak pertama grid, tapi ia di-set display: none. Ketika sebuah grid item di-set display: none, item itu tidak sekadar disembunyikan secara visual. Ia dicabut sepenuhnya dari antrean auto-placement grid, seolah tidak pernah ada.
Jadi grid menghitung ulang. Track template-nya tetap 240px 1fr, dua kolom, itu tidak berubah. Tapi sekarang cuma ada satu anak yang tersisa, yaitu area produk. Auto-placement menaruh anak pertama yang tersedia ke sel pertama yang tersedia, dan sel pertama adalah kolom 240px. Maka area produk yang tadinya saya bayangkan duduk manis di kolom 1fr malah dijejalkan ke track 240px. Kolom 1fr yang lebar itu dibiarkan kosong, karena tidak ada anak lagi yang mengisinya.
Tidak ada yang "rusak" di CSS produk. Yang rusak adalah asumsi saya bahwa display: none cuma menyembunyikan sidebar tanpa menyentuh geometri grid. Padahal ia mengubah antrean penempatan seluruh grid.
Perbaikannya
Aturan inti yang saya pegang sejak itu: jangan pasangkan display: none dengan track pertama yang fixed. Kalau anak pertama bisa hilang, track pertama tidak boleh punya lebar tetap yang mengunci anak berikutnya.
Cara yang paling saya suka adalah gating kolom pakai :has(). Default-nya satu kolom, dan template dua kolom baru muncul kalau sidebar benar-benar terbuka:
.layout {
display: grid;
grid-template-columns: 1fr;
}
.layout:has(.sidebar.is-open) {
grid-template-columns: 240px 1fr;
}Dengan cara ini, saat sidebar tidak ada, grid cuma punya satu track 1fr dan area produk mengisi seluruh lebar dengan benar. Track 240px hantu itu tidak pernah dibuat, jadi tidak ada yang bisa menjepit siapa pun.
Kalau saya butuh sidebar selalu ada di DOM tapi kadang tersembunyi, saya tempelkan kolom eksplisit ke konten supaya ia tidak pernah nyasar ke sel pertama:
.content-wrap {
grid-column: 2;
}Pilihan ketiga, dan sering yang paling bersih di lingkungan template, adalah merender sidebar secara kondisional di sisi server, misalnya di Liquid, supaya grid benar-benar cuma punya satu anak ketika sidebar tidak dipakai. Kalau elemennya memang tidak ada, tidak ada display: none yang perlu dikhawatirkan, dan auto-placement tidak punya kejutan untuk diberikan.
Pelajaran
display: none di sebuah grid item bukan operasi kosmetik. Ia mencabut item dari antrean auto-placement, dan sisa anak akan mengalir ulang ke sel yang tersedia mulai dari sel pertama. Kalau track pertamamu fixed dan sempit, anak yang mengalir ke situ akan ikut menciut, dan kamu akan menghabiskan waktu meng-inspect CSS elemen yang salah. Saat sebuah elemen tampil dengan lebar yang aneh dan spesifik seperti 240px, jangan buru-buru curiga ke CSS elemen itu; tanya dulu apakah angka itu datang dari track grid induknya. Sejak kejadian ini, begitu saya lihat lebar yang mencurigakan cocok dengan salah satu track template, saya langsung naik satu level ke container dan bertanya: siapa yang seharusnya mengisi sel ini, dan ke mana dia pergi?