Halo teman-teman semuanya, setelah kita belajar tentang Flexbox pada artikel sebelumnya, sekarang saatnya kita mengenal sistem Grid Layout di Tailwind CSS. Grid sangat berguna untuk membuat tata letak halaman yang kompleks, seperti galeri foto, tampilan kartu produk, hingga halaman dashboard.
Dengan memanfaatkan utility class dari Tailwind, kita bisa membuat sistem grid yang fleksibel, responsif, dan mudah dibaca — tanpa perlu menulis deklarasi CSS manual.
1. Membuat Grid Dasar
Untuk memulai menggunakan grid, kita cukup menambahkan class grid ke dalam elemen kontainer. Lalu gunakan grid-cols-{n} untuk menentukan jumlah kolom.
| Class |
Fungsi |
grid |
Mengaktifkan sistem grid |
grid-cols-1 |
1 kolom |
grid-cols-2 |
2 kolom |
grid-cols-3 |
3 kolom |
grid-cols-4 |
4 kolom, dan seterusnya hingga 12 |
Contoh:
<div class="grid grid-cols-2 gap-4">
<div class="bg-blue-100 p-4">Kolom 1</div>
<div class="bg-blue-200 p-4">Kolom 2</div>
</div>
2. Menentukan Jarak Antar Kolom dan Baris
Untuk memberi jarak antar elemen grid, gunakan class gap-{n} untuk jarak keseluruhan, atau gap-x-{n} dan gap-y-{n} untuk mengatur secara horizontal dan vertikal.
| Class |
Fungsi |
gap-4 |
Jarak antar item 1rem |
gap-x-6 |
Jarak antar kolom 1.5rem |
gap-y-2 |
Jarak antar baris 0.5rem |
Contoh:
<div class="grid grid-cols-3 gap-x-4 gap-y-2">
<div class="bg-pink-100 p-2">1</div>
<div class="bg-pink-200 p-2">2</div>
<div class="bg-pink-300 p-2">3</div>
</div>
3. Mengatur Lebar Kolom Secara Otomatis
Gunakan class grid-cols-auto seperti grid-cols-auto, grid-cols-auto-fit, atau grid-cols-auto-fill (melalui grid-cols-[auto-fit,minmax(200px,_1fr)]) dengan arbitrary values untuk membuat kolom yang dinamis.
| Class |
Fungsi |
grid-cols-[auto-fit,minmax(200px,_1fr)] |
Kolom otomatis menyesuaikan lebar minimal 200px |
grid-cols-[repeat(auto-fill,...)] |
Mengisi ruang dengan kolom sebanyak mungkin |
Contoh:
<div class="grid [grid-template-columns:repeat(auto-fit,minmax(150px,1fr))] gap-4">
<div class="bg-teal-100 p-4">A</div>
<div class="bg-teal-200 p-4">B</div>
<div class="bg-teal-300 p-4">C</div>
<div class="bg-teal-400 p-4">D</div>
</div>
4. Menggabungkan Kolom (Grid Column Span)
Gunakan col-span-{n} untuk menggabungkan item agar melebar ke beberapa kolom.
| Class |
Fungsi |
col-span-1 |
Mengisi 1 kolom |
col-span-2 |
Mengisi 2 kolom |
col-span-3 |
Mengisi 3 kolom, dst. |
Contoh:
<div class="grid grid-cols-3 gap-4">
<div class="bg-purple-100 p-4 col-span-2">Lebar 2 Kolom</div>
<div class="bg-purple-300 p-4">Kolom Biasa</div>
</div>
Contoh Lengkap: Galeri Grid Responsif
Berikut ini adalah contoh implementasi grid untuk galeri foto atau produk.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Grid Gallery</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Galeri Grid</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded shadow">Item 1</div>
<div class="bg-white p-4 rounded shadow">Item 2</div>
<div class="bg-white p-4 rounded shadow">Item 3</div>
<div class="bg-white p-4 rounded shadow">Item 4</div>
<div class="bg-white p-4 rounded shadow">Item 5</div>
<div class="bg-white p-4 rounded shadow">Item 6</div>
</div>
</div>
</body>
</html>
Kesimpulan
Dengan Tailwind CSS, membuat layout grid menjadi sangat mudah dan efisien. Kita bisa menentukan jumlah kolom, jarak antar elemen, dan ukuran responsif hanya dengan beberapa utility class.
Sistem grid ini cocok digunakan untuk menampilkan konten dalam bentuk kartu, galeri, tabel, dan elemen visual lainnya secara rapi dan responsif.
Pada artikel berikutnya, kita akan membahas bagaimana menggunakan responsive design di Tailwind — yaitu bagaimana membuat tampilan kita tetap nyaman di berbagai ukuran layar.
Terima Kasih