FluentStack

Kapan Pakai Flexbox atau Grid?

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner40 menitBahasa Indonesia

Kapan Pakai Flexbox atau Grid?

Pelajari aturan sederhana untuk memilih Flexbox atau Grid dalam layout CSS.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami Flexbox cocok untuk layout satu arah
  • Memahami Grid cocok untuk layout dua arah
  • Memilih tool layout berdasarkan bentuk masalah
  • Menghindari memaksa satu tool untuk semua layout
CSSFlexboxGridLayout Decision

Isi lesson

5 blok
  1. 1.
    Pilih berdasarkan masalah layoutBelum selesaiWajib
  2. 2.
    Contoh keputusan layoutBelum selesaiWajib
  3. 3.
    Cek pemahamanBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Pilih berdasarkan masalah layout

Wajib

Pakai Flexbox saat fokusnya menyusun item dalam satu baris atau satu kolom. Pakai Grid saat kamu butuh baris dan kolom.

Navbar biasanya cocok dengan Flexbox. Card gallery biasanya cocok dengan Grid. Banyak UI nyata memakai keduanya bersama-sama: Grid untuk struktur besar, Flexbox untuk isi kecil di dalam card atau navbar.

Bagian ini memengaruhi progres lesson.

Contoh keputusan layout

Wajib

Beberapa keputusan beginner yang bisa kamu pakai:

  • Navbar: Flexbox.
  • Button group: Flexbox.
  • Product card grid: Grid.
  • Dashboard summary cards: Grid.
  • Isi kecil di dalam card: Flexbox.

Aturannya bukan hafalan kaku. Lihat dulu apakah masalahnya satu arah atau dua arah.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kalau kamu ingin membuat gallery card 3 kolom, layout tool mana yang biasanya lebih cocok?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Menggabungkan Flexbox dan Grid

Latihan memakai Grid untuk kumpulan card dan Flexbox untuk isi kecil di dalam card.

Tujuan awal: Gunakan .cards sebagai grid container.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Flexbox cocok untuk satu arah.
  • Grid cocok untuk dua arah.
  • Keduanya bisa dipakai bersama.
  • Pilih berdasarkan masalah layout, bukan karena hafalan.
  • Berikutnya kamu akan menguji pemahaman Flexbox dan Grid.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Pilih berdasarkan masalah layout.

Memuat progresReview module