Sistem Layout Berbasis Grid

Kenapa ini penting

Flexbox hebat untuk satu dimensi (satu baris atau satu kolom). Tapi bagaimana dengan galeri foto yang rapi berbaris dan berkolom, halaman dashboard dengan kartu statistik dan grafik berbagai ukuran, atau layout majalah? Di sinilah CSS Grid bersinar karena ia mengatur dua dimensi sekaligus.

Banyak pemula menghindari grid karena terlihat rumit di CSS biasa. Dengan Tailwind, grid menjadi sangat ringkas: grid grid-cols-3 gap-4 sudah menghasilkan tiga kolom rapi. Modul ini membawamu dari grid dasar sampai pola auto-fit yang responsif tanpa media query.

Konsep inti

Grid dasar

grid mengaktifkan grid container.
grid-cols-3 membuat 3 kolom sama lebar (repeat(3, minmax(0, 1fr))). Di v4 angka berapa pun bisa dipakai: grid-cols-7, grid-cols-15.
grid-rows-4 membuat 4 baris.
gap-4, gap-x-6, gap-y-2 jarak antar sel.

Analogi: grid itu seperti rak buku atau kotak telur. Kamu menentukan berapa sekat (kolom dan baris), lalu meletakkan barang di sekat-sekat itu. Barang besar boleh memakai beberapa sekat sekaligus.

Span dan posisi

col-span-2 item memakan 2 kolom; col-span-full memakan seluruh lebar.
row-span-2 memakan 2 baris.
col-start-2, col-end-4, row-start-1 untuk penempatan presisi.

Ukuran baris otomatis dan alur

auto-rows-fr membuat semua baris tambahan sama tinggi; auto-rows-[12rem] tinggi tetap.
grid-flow-row (default), grid-flow-col, grid-flow-dense (mengisi celah kosong otomatis, bagus untuk galeri dengan item berbagai ukuran).

Auto-fit dengan arbitrary value

Pola sakti untuk galeri responsif tanpa breakpoint:

grid-cols-[repeat(auto-fit,minmax(14rem,1fr))]

Artinya: "isi baris dengan kolom sebanyak mungkin, setiap kolom minimal 14rem, sisanya dibagi rata." Di layar lebar muncul 4-5 kolom, di HP otomatis 1 kolom. Perhatikan tidak ada spasi, karena spasi akan memecah class. Bedanya dengan auto-fill: auto-fill tetap menyisakan "kolom hantu" kosong kalau item sedikit, auto-fit melebarkan item yang ada untuk mengisi ruang.

Template kolom kustom

grid-cols-[16rem_1fr] untuk sidebar tetap + konten. grid-cols-[auto_1fr_auto] untuk baris dengan dua sisi seukuran isinya. Untuk menyelaraskan anak dengan grid induk, ada grid-cols-subgrid.

Penjajaran

place-items-center menengahkan isi tiap sel di kedua sumbu. justify-items-*, items-*, place-content-* juga tersedia. Trik terpendek untuk menengahkan satu elemen: grid place-items-center.

Contoh kode

<!-- Galeri responsif tanpa media query: auto-fit + minmax -->
<section class="grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-4 p-4">
  <img src="https://picsum.photos/seed/g1/600/400" alt="" class="aspect-3/2 w-full rounded-lg object-cover" />
  <img src="https://picsum.photos/seed/g2/600/400" alt="" class="aspect-3/2 w-full rounded-lg object-cover" />
  <img src="https://picsum.photos/seed/g3/600/400" alt="" class="aspect-3/2 w-full rounded-lg object-cover" />
  <img src="https://picsum.photos/seed/g4/600/400" alt="" class="aspect-3/2 w-full rounded-lg object-cover" />
  <img src="https://picsum.photos/seed/g5/600/400" alt="" class="aspect-3/2 w-full rounded-lg object-cover" />
  <img src="https://picsum.photos/seed/g6/600/400" alt="" class="aspect-3/2 w-full rounded-lg object-cover" />
</section>
<!-- → HP: 1 kolom; tablet: 2-3 kolom; desktop lebar: 4-5 kolom, otomatis -->

<!-- Galeri "bento" dengan span dan grid-flow-dense -->
<section class="grid grid-flow-dense auto-rows-[10rem] grid-cols-2 gap-3 md:grid-cols-4">
  <div class="col-span-2 row-span-2 rounded-xl bg-rose-200">Sorotan utama</div>
  <div class="rounded-xl bg-amber-200">A</div>
  <div class="rounded-xl bg-lime-200">B</div>
  <div class="col-span-2 rounded-xl bg-sky-200">Lebar</div>
  <div class="row-span-2 rounded-xl bg-violet-200">Tinggi</div>
  <div class="rounded-xl bg-teal-200">C</div>
</section>

<!-- Layout dashboard: sidebar + header + area konten -->
<div class="grid min-h-dvh grid-cols-1 md:grid-cols-[15rem_1fr] md:grid-rows-[auto_1fr]">
  <aside class="bg-gray-900 p-4 text-gray-300 md:row-span-2">
    <p class="mb-6 text-lg font-bold text-white">Admin</p>
    <nav class="grid gap-1 text-sm">
      <a href="#" class="rounded px-3 py-2 bg-gray-800 text-white">Ringkasan</a>
      <a href="#" class="rounded px-3 py-2 hover:bg-gray-800">Pesanan</a>
      <a href="#" class="rounded px-3 py-2 hover:bg-gray-800">Pelanggan</a>
    </nav>
  </aside>

  <header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
    <h1 class="text-xl font-semibold">Ringkasan</h1>
    <img src="https://i.pravatar.cc/64?img=15" alt="" class="size-8 rounded-full" />
  </header>

  <main class="grid content-start gap-6 bg-gray-50 p-6">
    <!-- Kartu statistik: 1 kolom di HP, 2 di sm, 4 di xl -->
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      <div class="rounded-xl bg-white p-5 shadow-xs">
        <p class="text-sm text-gray-500">Pendapatan</p>
        <p class="mt-1 text-2xl font-bold">Rp48,2 jt</p>
      </div>
      <div class="rounded-xl bg-white p-5 shadow-xs">
        <p class="text-sm text-gray-500">Pesanan</p>
        <p class="mt-1 text-2xl font-bold">1.204</p>
      </div>
      <div class="rounded-xl bg-white p-5 shadow-xs">
        <p class="text-sm text-gray-500">Pelanggan baru</p>
        <p class="mt-1 text-2xl font-bold">312</p>
      </div>
      <div class="rounded-xl bg-white p-5 shadow-xs">
        <p class="text-sm text-gray-500">Konversi</p>
        <p class="mt-1 text-2xl font-bold">3,8%</p>
      </div>
    </div>

    <!-- Grafik besar 2/3 dan daftar 1/3 -->
    <div class="grid gap-4 lg:grid-cols-3">
      <div class="grid h-72 place-items-center rounded-xl bg-white shadow-xs lg:col-span-2">Grafik penjualan</div>
      <div class="h-72 rounded-xl bg-white p-5 shadow-xs">Produk terlaris</div>
    </div>
  </main>
</div>
<!-- → HP: semua menumpuk; md ke atas: sidebar kiri setinggi layar, header & konten di kanan -->

Kesalahan umum

Memberi spasi di dalam arbitrary value grid. grid-cols-[repeat(auto-fit, minmax(14rem, 1fr))] rusak. Tulis tanpa spasi atau pakai _.
Lupa grid di induk. grid-cols-3 tidak berpengaruh tanpa grid.
Memakai grid untuk sekadar baris tombol. Flex lebih sederhana untuk satu dimensi.
Kolom meluber karena konten panjang. Utility grid-cols-N sudah memakai minmax(0,1fr), tetapi pada template kustom gunakan minmax(0,1fr) juga, bukan 1fr polos, kalau isinya bisa sangat panjang (misalnya blok kode).
Tertukar auto-fit dan auto-fill. Untuk item yang harus melebar mengisi baris, gunakan auto-fit.

Latihan

Mudah, Buat grid 3 kolom dengan jarak 16px berisi 6 kotak berwarna.
Sedang, Buat grid kartu produk yang 1 kolom di HP, 2 kolom di sm, 3 kolom di lg, dan kartu pertama memakan 2 kolom mulai lg.
Menantang, Buat galeri auto-fit dengan lebar minimum 12rem, di mana setiap item ketiga memakan 2 baris (petunjuk: gunakan variant nth-3: atau tulis class langsung pada item tertentu) dan aktifkan grid-flow-dense.

Lihat solusi

Grid 3 kolom:

<div class="grid grid-cols-3 gap-4">
  <div class="h-20 rounded bg-red-200"></div>
  <div class="h-20 rounded bg-orange-200"></div>
  <div class="h-20 rounded bg-yellow-200"></div>
  <div class="h-20 rounded bg-green-200"></div>
  <div class="h-20 rounded bg-blue-200"></div>
  <div class="h-20 rounded bg-purple-200"></div>
</div>

Grid produk:

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-xl bg-white p-6 shadow-sm lg:col-span-2">Produk unggulan</article>
  <article class="rounded-xl bg-white p-6 shadow-sm">Produk 2</article>
  <article class="rounded-xl bg-white p-6 shadow-sm">Produk 3</article>
  <article class="rounded-xl bg-white p-6 shadow-sm">Produk 4</article>
</div>

Galeri dense:

<div class="grid grid-flow-dense auto-rows-[8rem] grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-3">
  <div class="rounded-lg bg-sky-200">1</div>
  <div class="rounded-lg bg-sky-300">2</div>
  <div class="row-span-2 rounded-lg bg-sky-400">3 (tinggi)</div>
  <div class="rounded-lg bg-sky-200">4</div>
  <div class="rounded-lg bg-sky-300">5</div>
  <div class="row-span-2 rounded-lg bg-sky-400">6 (tinggi)</div>
</div>
<!-- Alternatif: beri semua item class "nth-3:row-span-2" -->

Ringkasan

grid + grid-cols-N + gap-* membuat layout kolom yang rapi; angka bebas di v4.
col-span-*, row-span-*, col-start-* mengatur ukuran dan posisi item.
grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] membuat galeri responsif tanpa breakpoint.
Template kustom seperti grid-cols-[15rem_1fr] cocok untuk layout dashboard.
grid place-items-center adalah cara singkat menengahkan konten.