Menyusun tata letak halaman web dulu adalah mimpi buruk (bayangkan CSS float dan clear-fix hacks). Kini, Tailwind CSS dipadukan dengan Flexbox dan Grid mengubah mimpi buruk itu menjadi pengalaman ngoding yang sangat produktif dan menyenangkan.
Flexbox vs Grid: Kapan Menggunakan Apa?
Pertanyaan yang paling sering ditanyakan oleh developer yang baru belajar tata letak modern adalah: kapan saya harus memakai Flexbox, dan kapan saya harus memakai Grid? Aturan praktisnya (rule of thumb) sebenarnya cukup sederhana. Flexbox dirancang untuk layout satu dimensi (one-dimensional) -- artinya, ia sangat mahir mengatur elemen secara horizontal (dalam satu baris) ATAU secara vertikal (dalam satu kolom). Flexbox sempurna untuk menyusun menu navigasi, tombol, atau ikon-ikon yang sejajar.
Di sisi lain, CSS Grid lahir untuk layout dua dimensi (two-dimensional). Grid secara alami mampu menangani baris dan kolom secara bersamaan. Jika Anda membangun layout galeri foto yang kompleks, dashboard admin dengan berbagai panel, atau kerangka utama halaman web (header, sidebar, konten, footer), maka CSS Grid adalah senjata paling ampuh. Tailwind CSS mempermudah penggunaan keduanya dengan class utilitas yang sangat intuitif.
"Kekuatan super Tailwind bukan hanya karena ia menulis ulang CSS untuk Anda, tapi ia memaksa Anda untuk mendesain dengan konsistensi sistematis (design tokens) sejak baris kode pertama."
Frontend Architect
Tailwind Enthusiast Club
Menulis Layout Grid Responsif
Mari kita lihat betapa mudahnya membuat layout grid card untuk daftar artikel blog. Pada tampilan layar kecil (mobile), kita ingin 1 kolom, layar medium 2 kolom, dan layar desktop besar 3 kolom. Menggunakan CSS konvensional, ini akan membutuhkan beberapa media query yang melelahkan. Di Tailwind, kita selesaikan dalam satu baris.
<!--
Satu div pembungkus utama yang menggunakan Utility Classes Tailwind
grid: mengaktifkan CSS Grid
grid-cols-1: Mobile-first (1 kolom)
md:grid-cols-2: Medium screen ke atas (2 kolom)
lg:grid-cols-3: Large screen ke atas (3 kolom)
gap-6: Memberikan jarak seragam (margin) antar elemen sebesar 1.5rem
-->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card Item 1 -->
<div class="bg-white p-6 rounded-xl shadow">Konten Card 1</div>
<!-- Card Item 2 -->
<div class="bg-white p-6 rounded-xl shadow">Konten Card 2</div>
<!-- Card Item 3 -->
<div class="bg-white p-6 rounded-xl shadow">Konten Card 3</div>
</div>Hindari Nesting Berlebihan: Dengan kekuatan Grid dan Flexbox, Anda seharusnya dapat meratakan struktur DOM HTML Anda. Semakin sedikit elemen bersarang (div di dalam div di dalam div), semakin cepat browser melakukan proses render halaman Anda.
Komentar
Posting Komentar