Dulu, menaruh tiga kartu sejajar atau membuat sesuatu benar-benar di tengah layar butuh trik float, inline-block, dan hitungan margin yang rapuh. Flexbox dan Grid hadir sebagai modul layout CSS3 yang memang dirancang untuk itu. Sekarang keduanya didukung semua browser modern, jadi tidak ada alasan memakai trik lama.

Flexbox mengatur item di satu arah: baris atau kolom. Ada dua peran:

• Flex container: induk yang diberi display: flex.
• Flex item: anak langsung container. Cucu tidak ikut, kecuali induknya juga dijadikan flex.

<nav class="menu">
  <a href="#">Logo</a>
  <a href="#">Kelas</a>
  <a href="#">Masuk</a>
</nav>

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Hasilnya: tiga link berjejer dalam satu baris, Logo menempel kiri, Masuk menempel kanan, Kelas di tengah, dan semuanya rata tengah secara vertikal.

Dua sumbu

Kunci memahami Flexbox adalah main axis (sumbu utama) dan cross axis (sumbu silang). flex-direction menentukan main axis.

Saat flex-direction: column, sumbunya bertukar: justify-content jadi mengatur vertikal dan align-items mengatur horizontal. Ini sering bikin bingung, jadi ingat saja: justify selalu ikut arah item mengalir.

Perhatikan juga nilai default align-items: stretch. Karena itu, item dalam satu baris flex otomatis sama tinggi walau isinya berbeda panjang. Ini sangat berguna untuk deretan kartu: kartu dengan deskripsi pendek tetap setinggi kartu dengan deskripsi panjang, tanpa perlu menulis height sama sekali. Kalau kamu tidak ingin efek ini, ganti dengan flex-start atau center.

Trik legendaris menaruh sesuatu tepat di tengah:

.layar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-wrap dan flex: 1

Secara default item flex dipaksa muat dalam satu baris dan akan menyusut. Dengan flex-wrap: wrap, item yang tidak muat turun ke baris berikutnya, cocok untuk deretan kartu.

Properti flex di item mengatur cara item berbagi ruang sisa. flex: 1 adalah singkatan flex-grow: 1; flex-shrink: 1; flex-basis: 0%, artinya "ambil bagian yang sama dari ruang tersedia".

.kolom { flex: 1; }
.kolom.lebar { flex: 2; }

Kalau ada tiga .kolom dan salah satunya .lebar, ruang dibagi 1 : 1 : 2. Pola lain yang sering dipakai: kolom pencarian flex: 1 di samping tombol berukuran tetap, sehingga input mengisi semua sisa lebar.

Grid mengatur baris dan kolom sekaligus. Kamu mendefinisikan "lintasan" di container, lalu item mengisi sel-selnya secara otomatis dari kiri ke kanan, atas ke bawah.

.layout {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  gap: 20px;
}

Kolom pertama tetap 250px, dua kolom lainnya berbagi sisa ruang sama rata.

Unit fr, repeat(), dan minmax()

• fr (fraction) membagi ruang sisa setelah ukuran tetap dan gap dikurangi. Di container 1000px dengan 200px 1fr 3fr dan tanpa gap, sisa 800px dibagi 4 bagian, jadi kolomnya 200px, 200px, 600px.
• repeat(4, 1fr) sama dengan 1fr 1fr 1fr 1fr, lebih ringkas.
• minmax(200px, 1fr) berarti "minimal 200px, maksimal satu bagian".

Gabungan paling terkenal untuk galeri responsif tanpa media query:

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Di layar lebar muat empat atau lima kolom, di HP otomatis tinggal satu kolom, karena browser menghitung berapa kolom 200px yang muat lalu membagi sisa ruang.

grid-area singkat

Untuk layout halaman, grid-template-areas membuat CSS terbaca seperti denah:

.halaman {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }

Header membentang dua kolom, sidebar di kiri bawah, dan main di kanan bawah. Nama area harus membentuk persegi panjang. Untuk kasus kecil, kamu juga bisa memakai grid-column: 1 / 3 (dari garis 1 sampai garis 3) atau grid-column: span 2.

Keduanya bukan saingan. Di proyek nyata kamu sering memakai Grid untuk kerangka halaman, lalu Flexbox di dalam tiap kartu atau navbar.

Untuk teks panjang seperti artikel, modul multi-column membagi isi ke beberapa kolom ala koran tanpa markup tambahan:

.artikel {
  column-count: 3;
  column-gap: 32px;
  column-rule: 1px solid #ddd;
}
.artikel h2 { column-span: all; }

Teks mengalir otomatis dari kolom pertama ke kolom berikutnya, dengan garis tipis di antara kolom, dan judul membentang melintasi semua kolom. Pakai column-width: 250px jika ingin browser sendiri yang menentukan jumlah kolom, dan break-inside: avoid agar satu blok tidak terpotong di dua kolom.

• Menaruh display: flex pada item, bukan pada induknya.
• Mengira justify-content selalu horizontal. Pada flex-direction: column, ia mengatur vertikal.
• Lupa flex-wrap: wrap, sehingga kartu menyusut gepeng dalam satu baris.
• Memakai margin di setiap item padahal gap lebih rapi.
• Menulis grid-template-columns: 3 dan berharap muncul tiga kolom. Yang benar repeat(3, 1fr).