Layouting dengan Flexbox & Grid

Dalam bagian ini, kita akan membahas dua teknik utama dalam CSS untuk mengatur tata letak halaman web: Flexbox dan CSS Grid.

3.1 Pengenalan Flexbox

Flexbox (Flexible Box) adalah metode layout satu dimensi yang digunakan untuk mengatur elemen dalam satu baris (horizontal) atau satu kolom (vertikal).

Konsep Dasar Flexbox

• Container & Items: Flexbox bekerja dalam elemen induk (container) dan elemen anak (items).
• Arah Utama (Main Axis) dan Arah Sekunder (Cross Axis)
• Properti Penting Flexbox:
  • display: flex; → Mengaktifkan Flexbox pada container
  • flex-direction: (row, row-reverse, column, column-reverse)
  • justify-content: (flex-start, center, space-between, dll.)
  • align-items: (flex-start, center, stretch, dll.)
  • flex-wrap: (nowrap, wrap, wrap-reverse)

Contoh Implementasi Flexbox

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

3.2 Pengenalan CSS Grid

CSS Grid adalah sistem layout dua dimensi yang memungkinkan kita mengatur elemen dalam baris dan kolom.

Konsep Dasar CSS Grid

• Container & Items: Mirip Flexbox, Grid memiliki container dan item.
• Grid Tracks: Baris dan kolom yang membentuk layout.
• Properti Penting CSS Grid:
  • display: grid; → Mengaktifkan Grid pada container
  • grid-template-columns: → Menentukan jumlah kolom
  • grid-template-rows: → Menentukan jumlah baris
  • gap: → Jarak antar elemen
  • justify-items: dan align-items:

Contoh Implementasi CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

3.3 Perbedaan Flexbox vs. CSS Grid

3.4 Kapan Menggunakan Flexbox atau Grid?

• Gunakan Flexbox jika Anda hanya ingin mengatur elemen dalam satu baris atau satu kolom.
• Gunakan CSS Grid jika Anda perlu membuat layout yang lebih kompleks dengan banyak baris dan kolom.