Menguasai Layout: Flexbox & Grid Spesial Tailwind
Di modul CSS dasar sebelumnya, kita telah mempelajari konsep Flexbox (Antrean 1Arah) dan Grid (Papan Catur
2Arah).
Kabar baiknya: Tailwind membuat fitur penataan layout ini 10x lebih cepat untuk diketik! Tanpa perlu menulis
blok CSS yang panjang lebar, kamu bisa membuat menu navigasi, galeri foto, atau dashboard super
rumit hanya dengan merangkai kata pendek seperti flex, grid, dan gap-4.
📦 1. Keajaiban Flexbox (Meratakan Barisan)
Untuk "menyulap" sebuah kontainer menjadi pembungkus ajaib Flexbox, kamu hanya perlu menambahkan class
flex. Selesai!
Secara default, semua elemen anaknya akan berbaris menyamping dari kiri ke kanan.
Ratakan sumbu utama (Kiri-Kanan)
💡 Contoh Nyata: Membuat Navbar Hitam
<div class="font-bold text-xl">Logo</div>
<ul class="flex gap-6">
<li>Beranda</li>
<li>Tentang</li>
</ul>
</nav>
▦ 2. CSS Grid (Desain Papan Catur Super Rapih)
Jika kamu ingin menjejerkan kotak seperti sebuah galeri foto atau tembok batu bata, lupakan Flexbox. Gunakan
grid! Di Tailwind, sistem Grid
ini bisa menentukan jumlah kolom rata hanya dengan satu baris kata sakti.
Jumlah Kolom (Columns)
Jarak Celah (Gap)
🧱 3. Kekuatan Rahasia: Col-Span (Menggabungkan Kotak)
Masih di dalam dunia Grid... terkadang kamu tidak ingin semua kotaknya berukuran sama. Kamu ingin satu kotak
Spesial (misal: Gambar Utama/Hero) menghabiskan ruang 2 kali lipat lebih lebar. Cukup tambahkan
class col-span-2 pada
anak kotaknya.
col-span-2
row-span-2
col-span-2
Induk Bungkus: grid grid-cols-3 gap-2
Mendesain Galeri Ala-Ala Instagram
Dengan gabungan grid-cols-3 pada induk kotak, kita mendapat arena dibagi tiga bagian.
Lalu pada div Anak pertama, kita mencetak col-span-2 (merampas lebar 2
kotak ke kanan) dan row-span-2
(Memanjangkan kaki ke bawah memakan sisa 2 kotak). Hasilnya: Layout asimetris profesional tercipta
tanpa perlu matematika rumit CSS murni!
📋 Kapan Pakai Flex? Kapan Pakai Grid?
Gunakan FLEXBOX jika...
Isi elemennya berbaris SATU ARAH (Hanya baris memanjang
horizontal, atau hanya kolom menjulang ke bawah). Ukuran lebar/tinggi elemen anaknya bebas
sesuka mereka (Sangat dinamis).
👉 Contoh: Bikin Navbar, Bikin
urutan Tombol di pojok kanan form.
Gunakan GRID jika...
Isi elemennya dirancang harus presisi kotak-kotak dalam DUA
ARAH sekaligus (Tali Baris & Tali Kolom). Kamu ingin sebuah "Pencetak Waffle" yang bentuk
petaknya pakem.
👉 Contoh: Daftar produk di Shopee, Album
Foto Gallery Instagram, Struktur kerangka Website keseluruhan (Sidebar Kiri + Konten
Kanan).