CSS Grid vs Flexbox: Kapan Harus Pakai Yang Mana?

Ketika membuat layout web modern, dua alat andalan dalam CSS adalah Grid dan Flexbox. Keduanya bisa digunakan untuk menyusun elemen secara fleksibel, tapi cara kerja dan tujuan utamanya berbeda.

Apa Itu Flexbox?

Flexbox (Flexible Box) adalah sistem layout satu dimensi.
Artinya: Flexbox digunakan untuk mengatur elemen dalam satu arah saja, horizontal (baris) atau vertikal (kolom).

Contoh Sederhana:

.container {
  display: flex;
  flex-direction: row; /* default: baris */
}

  Box 1
  Box 2
  Box 3

Kapan Pakai Flexbox?

Gunakan Flexbox jika:

• Kamu hanya ingin menyusun item dalam satu arah.
• Elemen memiliki ukuran fleksibel dan dinamis.
• Perlu menyusun elemen secara responsif dalam baris atau kolom.

 Contoh kasus penggunaan Flexbox:

• Navigasi horizontal
• Tombol sejajar
• Kartu yang rata di satu baris
• Form input dalam satu baris

 Apa Itu CSS Grid?

CSS Grid adalah sistem layout dua dimensi.
Artinya: Grid bisa menyusun elemen dalam baris dan kolom secara bersamaan.

Contoh Sederhana:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolom */
}

  Box 1
  Box 2
  Box 3
  Box 4
  Box 5

Kapan Pakai CSS Grid?

Gunakan Grid jika:

• Kamu ingin membuat layout yang kompleks dengan baris dan kolom.
• Ingin mengatur posisi elemen secara eksplisit, seperti grid area.
• Layout utama halaman (header, sidebar, content) butuh struktur rapi.

 Contoh kasus penggunaan Grid:

• Layout halaman web (header, sidebar, content, footer)
• Galeri foto
• Dashboard
• Tampilan majalah atau blog

 Perbandingan Singkat

 Kapan Harus Pakai Yang Mana?

Gunakan Flexbox jika:

• Butuh menyusun elemen secara linear (satu arah).
• Layout sederhana, seperti menu, form, baris tombol.
• Elemen berubah-ubah panjang/lebar.
• Gunakan Grid jika:
• Ingin mengatur layout halaman penuh (seperti desain majalah).

Perlu baris dan kolom secara bersamaan.

Butuh layout presisi dan simetris.

 Bisa Digabung?

• Ya! Kamu bisa menggabungkan Flexbox dan Grid.
  Contoh:
• Gunakan CSS Grid untuk layout utama (header, sidebar, content).
• Gunakan Flexbox di dalam konten untuk menyusun tombol atau item kecil.

 Kesimpulan

• Flexbox cocok untuk struktur satu arah, fleksibel, dan sederhana.
• Grid cocok untuk layout dua dimensi dan struktur kompleks.
• Kombinasi keduanya adalah kunci untuk layout web yang rapi dan responsif.

contoh kode HTML + CSS praktis 

Berikut adalah contoh kode HTML + CSS praktis yang membandingkan Flexbox vs CSS Grid dalam satu halaman. Kamu bisa langsung copy-paste dan coba di browser untuk melihat perbedaannya.

 Contoh 1: Flexbox Layout (Satu Dimensi - Baris)

  
  Flexbox Example
  
    .flex-container {
      display: flex;
      gap: 10px;
      background-color: #f1f1f1;
      padding: 10px;
      justify-content: space-around; /* Membagi rata item */
    }
    .flex-item {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      text-align: center;
      flex: 1; /* Membagi ukuran item secara merata */
    }
  



  Contoh Flexbox (Satu Baris)
  
    Box 1
    Box 2
    Box 3
 

 Contoh 2: CSS Grid Layout (Dua Dimensi - Baris & Kolom)

 
  Grid Example
  
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 kolom sama lebar */
      gap: 10px;
      background-color: #f1f1f1;
      padding: 10px;
    }
    .grid-item {
      background-color: #2196F3;
      color: white;
      padding: 20px;
      text-align: center;
    }
  



  Contoh CSS Grid (3 Kolom)
  
    Box 1
    Box 2
    Box 3
    Box 4
    Box 5
    Box 6