Grid di Tailwind itu CSS Grid yang ditulis sebagai class. Flexbox menjajarkan item dalam satu arah, sedangkan Grid membagi wadahnya jadi kolom dan baris sekaligus. Bayangin rak sepatu yang bersekat: kamu tentukan ada berapa kolom, lalu sepatunya mengisi sekat dari kiri ke kanan. Begitu satu baris penuh, sepatu berikutnya lanjut ke baris di bawahnya. Sepatu boots yang lebar boleh makan dua sekat.
🧪 Tebakan cepat: enam kotak, A sampai F, ada di
grid grid-cols-4. Baris kedua berisi berapa kotak? Tebak dulu, jawabannya ada di bagian "Baris berikutnya terisi sendiri".
Kisi tiga kolom
Ini kisi yang sama dengan yang ada di latihan:
<div id="grid" class="grid grid-cols-3 gap-4">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
| Class | CSS yang dihasilkan | Artinya |
|---|---|---|
grid |
display: grid; |
Grid nyala, A, B, dan C jadi grid item |
grid-cols-3 |
grid-template-columns: repeat(3, minmax(0, 1fr)); |
tiga kolom sama lebar |
gap-4 |
gap: 1rem; |
jarak 16px antar kolom dan antar baris |
griddipasang di induknya,#grid. Tiga<div>di dalamnya otomatis masuk ke sekat, tanpa class apa pun.repeat(3, ...)artinya kolomnya ada tiga.1frartinya satu bagian dari ruang yang tersisa, jadi tiga kolom dapat bagian yang sama.minmax(0, 1fr)menjaga supaya isi yang panjang gak bikin satu kolom lebih lebar dari yang lain.- Angka di
grid-cols-3adalah jumlah kolom.grid-cols-2dua kolom,grid-cols-4empat. Di Tailwind v4, angka berapa pun boleh, misalnyagrid-cols-7.
Hasilnya, A, B, dan C berjajar dalam satu baris, sama lebar, dengan jarak 16px di antaranya.
Baris berikutnya terisi sendiri
Kamu cuma menentukan jumlah kolom. Barisnya dibuat Grid sendiri sesuai jumlah item. Pakai enam kotak dari Lab, A sampai F:
| Class | Baris 1 | Baris 2 |
|---|---|---|
grid-cols-3 |
A B C | D E F |
grid-cols-4 |
A B C D | E F |
grid-cols-2 |
A B | C D, lalu baris 3: E F |
Di grid-cols-4, baris pertama penuh dengan A, B, C, D, jadi E dan F turun ke baris kedua. Itu jawaban tebakannya: dua kotak, dan dua sekat sisanya kosong.
Satu item melebar: col-span-2
col-span-2 menghasilkan grid-column: span 2 / span 2: item itu makan dua kolom. Class ini dipasang di item-nya, bukan di induk.
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
Baris 1 berisi A (dua sekat) dan B. Baris 2 berisi C, D, E. Baris 3 tinggal F. Mau satu item selebar semua kolom, misalnya judul? Pakai col-span-full (grid-column: 1 / -1).
📌 Jarak beda arah dan posisi item
gap-x-4(column-gap: 1rem) cuma mengatur jarak antar kolom,gap-y-2(row-gap: 0.5rem) cuma antar baris.grid-rows-2(grid-template-rows: repeat(2, minmax(0, 1fr))) membuat dua baris yang sama tinggi.col-start-2(grid-column-start: 2) menaruh item mulai dari kolom kedua.
🤔 Grid atau flex?
Satu arah saja, misalnya navbar atau deretan tombol? Pakai flex. Kolom yang harus rapi lurus dari atas ke bawah, misalnya galeri, daftar produk, atau dashboard? Pakai grid. Di Grid, kotak di baris kedua selalu lurus dengan kolom di atasnya, karena lebar kolomnya ditentukan induk.
⚠️ Jebakan yang sering ketemu
- Lupa
grid.grid-cols-3 gap-4tanpagriddiabaikan, dan A, B, C cuma menumpuk dari atas ke bawah. Latihannya mengecekdisplay: griddi#grid. - Nama class yang salah.
grid-col-3,grid-columns-3, dancols-3gak ada. Yang benargrid-cols-3, dengan s. Latihannya mengecek ada classgrid-cols-diikuti angka. - Atribut
style.style="display: grid"memang jalan, tapi latihannya minta semua gaya dari class, jadi atributstylesama sekali gak boleh ada. - Item yang gak muat.
col-span-2di kolom terakhir gak muat di baris itu, jadi item-nya pindah ke baris berikutnya dan meninggalkan sekat kosong.
TL;DR: grid = display: grid, dipasang di induk. grid-cols-3 = tiga kolom sama lebar (repeat(3, minmax(0, 1fr))), dan barisnya dibuat sendiri: item ke-4 turun ke baris kedua. gap-4 = jarak 16px antar kolom dan baris. col-span-2 dipasang di satu item supaya dia makan dua kolom, col-span-full selebar semua kolom. Tanpa grid, semua class grid-cols-* dan gap-* diabaikan.
