Webflow
Layout
Standar penggunaan Flexbox dan Grid untuk layout di Webflow.
Flexbox vs Grid
Kapan Menggunakan Flexbox
Gunakan Flexbox untuk alignment satu arah — horizontal atau vertikal.
Contoh penggunaan yang tepat:
- Navbar dengan logo di kiri dan menu di kanan
- Card dengan icon dan teks berdampingan
- Row tombol yang perlu di-center
Kapan Menggunakan Grid
Gunakan Grid untuk layout dua dimensi atau layout yang lebih kompleks.
Contoh penggunaan yang tepat:
- Gallery foto dengan banyak kolom
- Section fitur dengan grid 3 kolom
- Layout blog dengan sidebar
Aturan Positioning
Tidak diperbolehkan menggunakan margin untuk positioning elemen.
| ❌ Tidak Disarankan | ✅ Disarankan |
|---|---|
margin-left: 40px untuk menggeser elemen | justify-content atau align-items pada Flex/Grid |
margin-top: 80px untuk memberi jarak antar section | gap pada Flex/Grid parent |
| Menumpuk margin untuk centering | justify-content: center |
Alasan
Menggunakan margin untuk positioning akan menyebabkan layout yang rapuh — mudah rusak saat breakpoint berubah atau elemen ditambah/dihapus.