Mengatur tata letak halaman web dulu adalah pekerjaan yang menyebalkan. Developer zaman dulu memakai float dan clearfix yang rapuh, atau tabel yang tidak semestinya dipakai untuk layout. Untungnya era itu sudah berakhir. Panduan CSS Flexbox dan Grid ini akan mengajarkanmu dua sistem layout modern bawaan CSS yang membuat penyusunan halaman menjadi jauh lebih masuk akal: Flexbox untuk layout satu dimensi dan Grid untuk layout dua dimensi.
Di akhir artikel ini kamu akan bisa membuat dua komponen paling umum di web modern: deretan kartu produk yang rapi dan navbar responsif yang menyesuaikan layar HP. Semua contoh memakai CSS murni tanpa framework, supaya kamu benar-benar paham cara kerja di balik layarnya sebelum memakai bantuan seperti Bootstrap atau Tailwind.
CSS Flexbox dan Grid: Dua Senjata Layout Modern
Sebelum praktik, pahami dulu perbedaan filosofi keduanya lewat analogi sederhana. Flexbox itu seperti mengatur antrean: elemen disusun dalam satu baris atau satu kolom, dan kamu mengatur jarak serta perataannya di sepanjang jalur itu. Grid itu seperti mengatur ubin lantai: kamu membagi area menjadi baris dan kolom, lalu menempatkan elemen ke petak-petak yang tersedia.
Aturan praktisnya: pakai Flexbox untuk komponen satu dimensi seperti navbar, deretan tombol, atau kartu yang sejajar horizontal. Pakai Grid untuk layout dua dimensi seperti galeri foto, dashboard, atau keseluruhan kerangka halaman. Keduanya bisa digabung: Grid untuk kerangka besar halaman, Flexbox untuk mengatur isi di dalam setiap petaknya.
Kedua teknologi ini didukung penuh semua browser modern, jadi kamu tidak perlu khawatir soal kompatibilitas untuk proyek baru. Mari mulai dari Flexbox.
Flexbox: Mengatur Layout Satu Dimensi
Flexbox bekerja dengan dua peran: flex container (wadah) dan flex item (isi di dalamnya). Kamu mengubah sebuah elemen menjadi flex container cukup dengan satu baris: display: flex. Seketika itu juga semua anak langsungnya menjadi flex item yang tersusun horizontal dari kiri ke kanan.
<div class="container">
<div class="kotak">1</div>
<div class="kotak">2</div>
<div class="kotak">3</div>
</div>
.container {
display: flex;
gap: 12px; /* jarak antar item */
}
.kotak {
width: 80px;
height: 80px;
background-color: orange;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 8px;
}
Properti gap memberi jarak seragam antar item tanpa margin manual yang merepotkan. Perhatikan juga trik di class .kotak: ia sendiri menjadi flex container kecil agar angka di dalamnya rata tengah sempurna, teknik yang sangat sering dipakai untuk membuat tombol, badge, dan avatar.
Properti Penting Flexbox yang Wajib Hafal
Kekuatan Flexbox ada pada properti-propertinya. Berikut empat yang paling sering dipakai, semuanya ditulis di flex container.
justify-content mengatur perataan item sepanjang sumbu utama (horizontal bila arah default). Nilainya antara lain flex-start (rapat kiri), center (tengah), flex-end (rapat kanan), space-between (ujung ke ujung dengan jarak merata), dan space-around.
align-items mengatur perataan sepanjang sumbu silang (vertikal bila arah default). Nilai populernya stretch (default, item melar setinggi container), center, flex-start, dan flex-end. Kombinasi justify-content: center dan align-items: center adalah cara termudah membuat konten tepat di tengah layar.
flex-direction mengubah arah susunan. Nilai defaultnya row (horizontal kiri ke kanan). Ubah menjadi column untuk susunan vertikal ke bawah, yang sering dipakai untuk layout mobile atau tumpukan form.
flex-wrap menentukan apa yang terjadi bila item tidak muat satu baris. Nilai default nowrap memaksa semua item berdesakan, sedangkan wrap memindahkan kelebihan item ke baris baru dengan rapi.
.navbar {
display: flex;
justify-content: space-between; /* logo kiri, menu kanan */
align-items: center; /* sejajar vertikal */
padding: 16px 24px;
}
.formulir {
display: flex;
flex-direction: column; /* input tersusun ke bawah */
gap: 12px;
max-width: 400px;
}
Contoh .navbar di atas adalah pola paling klasik di web: logo di kiri dan menu di kanan hanya dengan satu baris justify-content: space-between. Hafalkan pola ini karena kamu akan menuliskannya berkali-kali.
CSS Grid: Mengatur Layout Dua Dimensi
Kalau Flexbox mengatur antrean, Grid mengatur petak. Kamu mengubah elemen menjadi grid container dengan display: grid, lalu mendefinisikan kolomnya dengan grid-template-columns. Fungsi repeat() mempermudah penulisan kolom yang berulang.
<div class="galeri">
<div class="foto">1</div>
<div class="foto">2</div>
<div class="foto">3</div>
<div class="foto">4</div>
<div class="foto">5</div>
<div class="foto">6</div>
</div>
.galeri {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 kolom sama lebar */
gap: 16px;
}
.foto {
background-color: #1a3a6e;
color: white;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 8px;
}
Satuan 1fr artinya satu fraksi dari ruang yang tersedia, sehingga tiga kolom 1fr selalu sama lebar mengikuti lebar container. Ini jauh lebih elegan dibanding menghitung persen manual. Properti gap di Grid memberi jarak antar baris sekaligus antar kolom dalam satu deklarasi.
Untuk membuat item melintasi beberapa kolom, pakai grid-column: span 2 pada itemnya. Teknik ini berguna untuk membuat kartu unggulan yang lebih lebar dari kartu biasa.
.foto-unggulan {
grid-column: span 2; /* selebar 2 kolom */
}
Fungsi minmax() membuat grid responsif tanpa media query: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) otomatis mengatur jumlah kolom mengikuti lebar layar, dengan tiap kolom minimal 200 piksel. Satu baris ini menggantikan banyak kode responsif manual.
Studi Kasus: Layout Kartu Produk Responsif
Sekarang gabungkan pengetahuanmu menjadi komponen nyata: deretan kartu produk untuk toko online. Setiap kartu berisi gambar, nama produk, harga, dan tombol beli. Kita pakai Grid untuk deretannya dan Flexbox untuk isi tiap kartu.
<div class="daftar-produk">
<div class="kartu">
<div class="gambar-produk">Gambar</div>
<h3>Kopi Arabika 200g</h3>
<p class="harga">Rp45.000</p>
<button>Beli</button>
</div>
<!-- duplikasi .kartu untuk produk lain -->
</div>
.daftar-produk {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding: 20px;
}
.kartu {
border: 1px solid #ddd;
border-radius: 12px;
padding: 16px;
display: flex; /* Flexbox di dalam kartu */
flex-direction: column; /* isi tersusun ke bawah */
gap: 8px;
}
.gambar-produk {
background-color: #f0f0f0;
height: 140px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.kartu .harga {
font-weight: bold;
color: #e67e22;
font-size: 18px;
}
.kartu button {
margin-top: auto; /* dorong tombol ke bawah kartu */
padding: 10px;
border: none;
border-radius: 8px;
background-color: #1a3a6e;
color: white;
cursor: pointer;
}
Perhatikan trik margin-top: auto pada tombol: ia mendorong tombol ke dasar kartu sehingga semua tombol sejajar walau deskripsi produk berbeda panjang. Ini contoh sempurna kolaborasi Grid di luar dan Flexbox di dalam. Coba ubah lebar browser dan saksikan jumlah kolom menyesuaikan otomatis tanpa satu pun media query.
Studi Kasus: Navbar Responsif dengan Flexbox
Navbar adalah komponen wajib hampir setiap website. Kita buat navbar dengan logo di kiri dan menu di kanan untuk layar besar, yang berubah menjadi tumpukan vertikal di layar kecil memakai satu media query.
<nav class="navbar">
<div class="logo">TokoKu</div>
<ul class="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1a3a6e;
padding: 16px 24px;
}
.logo {
color: white;
font-weight: bold;
font-size: 20px;
}
.menu {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.menu a {
color: white;
text-decoration: none;
}
/* Layar kecil: ubah jadi vertikal */
@media (max-width: 600px) {
.navbar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.menu {
flex-direction: column;
gap: 8px;
}
}
Kuncinya hanya dua baris di media query: flex-direction: column pada navbar dan menu. Sisanya mengikuti otomatis. Pola ini jauh lebih ringkas dibanding teknik float zaman dulu yang butuh clearfix dan perhitungan lebar manual.
CSS Flexbox dan Grid: Kapan Memakai yang Mana
Bingung memilih di antara keduanya adalah hal wajar. Pakai panduan cepat ini. Pilih Flexbox ketika kamu mengatur elemen dalam satu arah: navbar, deretan tombol aksi, form vertikal, atau konten yang rata tengah. Pilih Grid ketika kamu butuh kendali dua dimensi: galeri, dashboard, pricing table, atau kerangka halaman dengan header, sidebar, dan konten.
Bila ragu, tanyakan pada dirimu: apakah aku menyusun dalam satu arah saja? Bila ya, Flexbox jawabannya. Apakah aku butuh baris DAN kolom sekaligus? Bila ya, Grid jawabannya. Dalam praktiknya kamu akan sering memakai keduanya bersamaan seperti pada studi kasus kartu produk di atas, dan itu justru praktik yang dianjurkan.
Satu catatan: jangan memakai Grid untuk hal sepele satu dimensi seperti meratakan satu tombol ke kanan, dan jangan memaksa Flexbox untuk layout tabel kompleks. Memakai alat yang tepat membuat kode lebih pendek dan mudah dirawat.
Kesalahan Umum Saat Belajar Flexbox dan Grid
Pertama, lupa mengatur display: flex atau display: grid pada container tetapi properti seperti justify-content ditulis di item. Properti layout selalu ditulis di container, bukan di itemnya. Kedua, mengira align-items dan justify-content selalu berarti vertikal dan horizontal. Keduanya mengikuti sumbu yang berubah bila flex-direction diganti ke column.
Ketiga, memakai persen untuk kolom Grid padahal fr lebih tepat karena otomatis memperhitungkan gap. Keempat, tidak mereset margin dan padding bawaan pada ul saat membuat menu navbar, sehingga muncul jarak misterius. Kelima, menumpuk terlalu banyak nesting flex container yang sebenarnya bisa diselesaikan satu level Grid. Bila kode layoutmu terasa berbelit, biasanya ada cara yang lebih sederhana.
Langkah Selanjutnya
Kamu sekarang menguasai dua sistem layout modern CSS: Flexbox untuk satu dimensi dan Grid untuk dua dimensi, lengkap dengan dua studi kasus nyata berupa kartu produk responsif dan navbar adaptif. Skill ini langsung terpakai di setiap proyek web yang kamu kerjakan.
Layout yang bagus menjadi jauh lebih hidup dengan interaktivitas. Pelajari cara membuat navbar dan tombolmu merespons klik pengguna di Tutorial JavaScript untuk Pemula: Variabel, Fungsi, dan Manipulasi DOM. Dan bila kamu ingin melihat bagaimana tampilan seperti ini dipadukan dengan data dari server, Tutorial Laravel 12: Membuat CRUD Sederhana dari Nol untuk Pemula menunjukkan sisi backend-nya memakai Blade template yang distyling dengan teknik yang baru saja kamu pelajari.