Layout

23 November 2025

CSS - Perkiraan Breakpoint

Ukuran pastinya tidak menentu, karena mengukur pixel bukan lebar asli layar perangkat, tapi masih bisa di ambil rata rata atau umumnya aja, seperti berikut ini sm: 36em = 576px md: 48em = 768px lg: 62em = 992px xl: 75em = 1200px 2xl: 87.5em = 1400px Penjelasan Kira-kira pemetaan perangkatnya begini: sm (≥576px) → Smartphone besar (iPhone Plus, beberapa Android mid-high) & layar kecil dalam mode portrait. md (≥768px) → Tablet portrait, atau smartphone besar dalam mode landscape. lg (≥992px) → …

22 November 2025

CSS - Grid Column Responsive

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .item { background: #eee; padding: 1rem; border-radius: 8px; } Penjelasan auto-fit → kolom akan collapse kalau tidak cukup ruang. minmax(200px, 1fr) → lebar kolom minimal 200px, tapi bisa melebar maksimal mengisi baris. Jadi jumlah kolom otomatis berubah sesuai lebar layar, tanpa butuh breakpoint.

22 November 2025

CSS - Column Responsive

.container { column-width: 250px; column-gap: 1rem; } .item { background: #ddd; display: inline-block; width: 100%; margin: 0 0 1rem; } Penjelasan column-width: 250px → browser berusaha bikin kolom selebar itu. Jumlah kolom otomatis tergantung ruang. Tapi ingat: urutan konten dibagi ke bawah (column flow), bukan baris dulu seperti grid.

22 November 2025

CSS - Flexbox Responsive Pakai Flex Wrap

.container { display: flex; flex-wrap: wrap; gap: 1rem; } .item { flex: 1 1 250px; /* grow, shrink, basis */ min-width: 200px; max-width: 1fr; /* optional */ } Penjelasan Item akan otomatis turun ke baris baru kalau tidak muat.