Panduan CSS Grid untuk Pemula

CSS Grid adalah sistem layout dua dimensi: kita dapat mengatur kolom dan baris dalam satu konteks. Cara termudah mempelajarinya bukan dengan menghafal seluruh properti, melainkan membuat satu layout nyata lalu mengamati bagaimana browser membagi ruang.

Model mental: container, item, track, dan gap

Elemen dengan display: grid menjadi grid container. Anak langsungnya menjadi grid item. Ruang di antara dua garis grid disebut track; track vertikal membentuk kolom dan track horizontal membentuk baris. gap memberi jarak antarkartu tanpa menambah margin pada sisi luar container.

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr membagi ruang tersedia setelah ukuran tetap dan gap dihitung. Tiga nilai 1fr menghasilkan tiga track yang memperoleh bagian sama besar, tetapi pola ini belum aman untuk layar kecil karena tetap memaksa tiga kolom.

Siapkan markup yang tidak bergantung pada layout

Grid bekerja pada anak langsung container. Markup kartu sebaiknya tetap bermakna walaupun aturan grid dihapus.

<section aria-labelledby="artikel-terbaru">
  <h2 id="artikel-terbaru">Artikel terbaru</h2>
  <div class="article-grid">
    <article class="card">
      <h3><a href="semantic-html.html">Semantic HTML</a></h3>
      <p>Memilih elemen berdasarkan makna.</p>
    </article>
    <article class="card">...</article>
    <article class="card">...</article>
  </div>
</section>

Heading dan urutan kartu berasal dari HTML. Grid hanya menentukan penempatan visual. Prinsip ini penting karena properti penempatan dapat mengubah tampilan tanpa mengubah urutan fokus keyboard.

Membuat kolom intrinsik dengan minmax dan auto-fit

Untuk kartu, kita biasanya mengetahui lebar minimum yang masih nyaman, tetapi tidak mengetahui jumlah kolom pada setiap perangkat. Biarkan browser menghitungnya.

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(0.875rem, 2vw, 1.5rem);
}

auto-fit membuat sebanyak mungkin kolom yang muat. minmax() menjaga track tidak lebih sempit dari 16rem dan tetap dapat tumbuh. Fungsi min(100%, 16rem) mencegah nilai minimum 16rem memaksa overflow ketika viewport bahkan lebih sempit.

auto-fill mempertahankan track kosong, sedangkan auto-fit meruntuhkan track kosong agar item yang ada dapat mengisi ruang. Untuk daftar kartu yang jumlahnya berubah, auto-fit sering menghasilkan ruang yang lebih alami.

Layout artikel dan sidebar dengan track aman

Kasus dua kolom membutuhkan konten utama yang boleh menyusut dan sidebar yang tetap terbaca. Gunakan minmax(0, 1fr), bukan hanya 1fr, ketika anak di dalamnya berpotensi memiliki konten panjang.

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 52rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

Nilai minimum default grid item dapat mengikuti ukuran intrinsik konten. Satu URL panjang atau blok kode bisa membuat track enggan menyusut. minmax(0, 1fr) memberi izin untuk menyusut, lalu komponen panjang menangani overflow-nya sendiri.

Menangani gambar, kode, dan teks panjang

.card,
.article-layout > * {
  min-width: 0;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

.card__title {
  overflow-wrap: anywhere;
}

Jangan menyembunyikan seluruh overflow halaman sebagai perbaikan pertama. Itu dapat menutupi elemen yang sebenarnya masih terlalu lebar. Temukan pelakunya di DevTools, perbaiki ukuran intrinsiknya, kemudian izinkan scroll hanya pada komponen seperti tabel atau kode yang memang memerlukannya.

Grid areas untuk layout yang mudah dibaca

Pada halaman dengan header, main, sidebar, dan footer, nama area membuat hubungan visual lebih mudah dipelihara.

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  gap: 1.5rem;
}

.shell > header { grid-area: header; }
.shell > main   { grid-area: main; }
.shell > aside  { grid-area: aside; }
.shell > footer { grid-area: footer; }

Gunakan areas ketika namanya membantu memahami desain. Untuk galeri sederhana, auto-placement lebih ringkas. Jangan memindahkan item secara visual sehingga urutannya bertentangan dengan urutan DOM.

Kapan memakai Grid dan kapan memakai Flexbox?

Kebutuhan	Pilihan awal
Baris tombol atau navigasi	Flexbox
Galeri kartu dalam baris dan kolom	Grid
Konten utama dan sidebar	Grid
Ikon dan label dalam satu tombol	Flexbox
Komponen harus merespons lebar wadahnya	Grid + container query

Keduanya dapat digabungkan. Grid mengatur hubungan antarkomponen, sementara Flexbox mengatur isi satu komponen. Pilihan terbaik adalah yang membuat aturan lebih sedikit dan urutan konten tetap logis.

Debug menggunakan Grid Inspector

1. Pilih grid container di panel Elements.
2. Aktifkan overlay grid untuk melihat garis, nomor track, dan gap.
3. Periksa computed value grid-template-columns; nilai akhirnya menunjukkan ukuran track yang benar-benar digunakan.
4. Ubah lebar viewport perlahan, bukan hanya menguji tiga preset perangkat.
5. Gunakan keyboard untuk memastikan urutan fokus tetap mengikuti makna konten.

Checklist implementasi

• Grid diterapkan pada parent langsung item yang ingin ditata.
• Track memakai ukuran fleksibel dan mempunyai batas minimum yang masuk akal.
• Anak grid yang memuat teks atau kode panjang memiliki min-width: 0.
• Breakpoint muncul ketika konten membutuhkan perubahan, bukan berdasarkan nama perangkat.
• Urutan DOM masih benar tanpa CSS.
• Tidak ada scroll horizontal pada halaman di lebar 320px.

Referensi resmi

• MDN Learn: CSS Grid Layout
• MDN: Basic concepts of grid layout
• W3C: CSS Grid Layout Module Level 2