Gutter Container Disejajarkan ke Tepi Navbar

Beranda baru kelar, saatnya pamer. Saya buka di monitor lebar, mundur dikit biar keliatan satu layar penuh, dan mata langsung kebetok: deretan kartu di section utama masuk ke dalam sedikit dibanding logo sama menu di navbar. Gesernya tipis, gak sampai keliatan rusak. Tapi begitu garis lurusnya kebaca miring, udah gak bisa diabaikan.

Dugaan pertama saya meleset jauh. Saya kira max-w-6xl-nya kegedean, jadi konten kelebaran dan yang perlu dikecilin tuh lebar kartu. Sempat juga curiga ke grid sama gap antar kartu. Di devtools saya utak-atik width kartu, tambah margin kiri, ganti gap. Semakin diobok semakin jauh dari jawaban, karena masalahnya emang bukan di kartu.

Yang bener malah jauh lebih membosankan.

Dua gutter yang gak pernah ketemu

Inspeksi elemen, dan ketemu dua kandidat. Container di section utama pake px-4 sm:px-6 lg:px-8. Navbar pake px-3 sm:px-4. Masing-masing keliatan masuk akal kalau dibaca sendiri, tapi dijalanin bareng hasilnya beda.

Gutter itu jarak dari sisi container ke konten di dalamnya, dan justru bagian inilah yang beda antara dua komponen yang secara visual harus sejajar. Dari dokumentasi padding Tailwind, px-<number> itu ngeset padding-inline, jadi dia ngatur padding kiri dan kanan sekaligus ^[5]. Nilainya ngikut spacing scale: px-4 sama dengan 16 pixel, px-8 sama dengan 32 pixel ^[5]. Breakpoint-nya juga jelas di dokumentasi responsive: sm aktif mulai 40rem atau 640px, lg mulai 64rem ^[6].

Berarti di layar yang udah ngelewatin lg, kartu dapet padding-inline 32 pixel sementara logo di navbar cuma 16 pixel ^[5]. Selisih 16 pixel itu persis garis tipis yang bikin mata saya keriting tadi. Di layar kecil bedanya juga tetep ada: section 16 pixel, navbar 12 pixel ^[5].

Pola tiga lapis kayak di section itu sih bukan hal aneh. Banyak template siap pakai pake kombinasi serupa, dan pas saya nyalin dulu ke project, polanya ikut kebawa ke mana-mana. Termasuk ke navbar, yang entah kenapa waktu itu saya tulis versi lebih mungil.

Satu sumber kebenaran

Solusinya gak perlu ngerombak layout. Semua container max-w-6xl dan max-w-7xl saya normalisasi ke px-3 sm:px-4.

lg:px-8 dihapus total. Belasan file kena, di antaranya halaman blog, AboutServices, AboutSkills, sama AboutTimeline. Tiap file cuma ubah satu baris class, jadi mampir aja tanpa drama. Nemuin semuanya juga gampang, tinggal cari semua kemunculan max-w-6xl dan max-w-7xl terus dicek satu-satu. Dua ukuran lebar itu emang beda kebutuhan, tapi gutter-nya harus sama biar tepiannya nyambung.

Logikanya begini. Sebelumnya, gutter di tiap breakpoint ditentukan tiga lapis nilai yang nempel di masing-masing komponen. Begitu ada satu komponen pake kombinasi beda, garis lurusnya langsung retak, persis kayak kejadian di navbar. Sesudah dinormalisasi, tiap breakpoint tinggal punya satu sumber kebenaran. Gak ada tiga lapis nilai yang bisa saling drift.

Efek sampingnya nyenengin. Dulu pindahan gutter section sama navbar kejadian di momen yang beda, section pindah dua kali sepanjang resize sedangkan navbar cuma sekali. Sekarang dua-duanya geser bareng di breakpoint yang sama ^[6]. Resize pelan-pelan melewati 640px dan garisnya tetep nyambung dari layar sempit sampe lebar.

Kalau disuruh milih, saya emang sengaja nyamain semuanya ke navbar, bukan sebaliknya. Mata orang pertama kali ngunci ke logo dan menu, jadi itu anchor visualnya, kartu yang ngikut. Pola tiga lapis juga menurut saya gampang jadi sumber drift karena tiap komponen nyalin sendiri-sendiri. Makin banyak salinan, makin gede peluang ada satu yang kelewat pas diupdate.

Pelajaran kecilnya, masalah sejajar-garis di UI hampir selalu bukan soal ukuran elemen, tapi dua sistem padding yang kebetulan dikira sama. Sekarang tiap bikin container baru, saya tinggal salin px-3 sm:px-4 dari navbar dan beres.

Sumber

• Dokumentasi Tailwind CSS: padding [5]
• Dokumentasi Tailwind CSS: responsive design [6]