Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Table of Content

Refactor layout calc() → CSS Grid (dimulai)

Saya kerjakan bertahap dan terukur, bukan ubah semua sekaligus (terlalu berisiko). Target pertama yang paling bersih & aman: grid postingan Widget Featured (.itemFt .itm). Sebelum — pola "gutter margin-negatif" klasik: .itm{display:flex; width:calc(100% + 22px); left:-11px; right:-11px} .itm >{flex:0 0 calc(50% - 22px); width:calc(50% - 22px); margin:0 11px} Sesudah — CSS Grid murni: .itm{display:grid; grid-template-columns:1fr 1fr; gap:22px} .itm >{min-width:0; margin:0} Plus responsif: 640px → gap mengecil ke 15px (tetap 2 kolom), 500px → grid-template-columns:1fr (1 kolom). Ini menghapus 8 ekspresi calc() + semua margin negatif rapuh, diganti gap yang tahan banting. (calc() total: 92 → 85.) Yang sengaja BELUM saya sentuh (jujur soal risiko):

Layout utama (mainbar/sidebar) — sudah pakai persentase flex sederhana tanpa gutter calc; konversi untungnya kecil, risikonya (sidebar sticky) tidak sebanding. Related Posts (.rPst) — punya 4 gaya termasuk varian geser-horizontal; risiko pecah tinggi, perlu pass tersendiri yang hati-hati.

Lahir selamat. Saya seorang pembelajar, pemeriksa fakta, penulis, editor, dan pengeblog.

Posting Komentar