1. Flexbox: Tata Letak 1 Dimensi (Baris ATAU Kolom)
Flexbox dirancang untuk mendistribusikan ruang dan meratakan item di sepanjang satu sumbu (baik horizontal baris ATAU vertikal kolom). Sangat cocok untuk: navbar, tombol grup, atau kartu berdampingan.
Pola Navbar dengan Flexbox
css
| 1 | .navbar { |
| 2 | display: flex; |
| 3 | justify-content: space-between; /* Pisahkan logo di kiri & menu di kanan */ |
| 4 | align-items: center; /* Rata tengah secara vertikal */ |
| 5 | gap: 1.5rem; /* Jarak antar item */ |
| 6 | } |
2. CSS Grid: Tata Letak 2 Dimensi (Baris DAN Kolom)
CSS Grid dirancang untuk mengendalikan baris dan kolom secara bersamaan. Sangat ideal untuk halaman katalog produk, galeri foto, atau struktur layout dashboard aplikasi.
Grid Responsif Otomatis Tanpa Media Queries
css
| 1 | .katalog-grid { |
| 2 | display: grid; |
| 3 | /* Otomatis membuat kolom baru selebar minimal 280px jika layar muat */ |
| 4 | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| 5 | gap: 24px; |
| 6 | } |
Kuis Pemahaman
+10 XP
Kapan sebaiknya kamu memilih CSS Grid dibandingkan Flexbox?