Responsive Grid

Grid melengkapi kotak peralatan responsif dengan dua kemampuan yang tidak dimiliki flexbox: jumlah kolom yang ditentukan otomatis oleh ruang yang tersedia, dan peta wilayah bernama yang bisa ditulis ulang per breakpoint. Chapter ini dibuka dengan rekap singkat auto-fit dari section CSS Grid, lalu fokus pada teknik andalan halaman utuh: mendefinisikan ulang grid-template-areas, menjaga jumlah kolom tetap aman dengan minmax, dan satu contoh halaman dari ponsel sampai desktop.

Rekap: auto-fit untuk Galeri Kartu #

.galeri {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

Polanya sudah dibedah tuntas pada chapter auto-fill dan auto-fit serta Responsive Card Grid: browser membuat track baru setiap kali ada ruang untuk 220px, dan auto-fit melipat track kosong sehingga kartu-kartu terakhir tetap meregang memenuhi lebar. Pengingat satu kalimat: angka minimum di dalam minmax adalah penentu kapan jumlah kolom bertambah atau berkurang.

Pola ini bukan selalu pilihan terbaik. Bila desain menuntut semua baris berkolom sama lebar — baris kedua harus meniru lebar baris pertama meski isinya lebih sedikit — kartu sisa pada auto-fit justru meregang dan membedakan diri. Untuk kasus itu, auto-fill atau repeat(3, 1fr) di breakpoint tertentu lebih tepat; keduanya sudah dibahas pada chapter terkait, dan pilihannya kembali ke perilaku yang diminta desain.

Jumlah Kolom yang Tidak Pernah Meluber #

Masalah muncul di lingkungan yang lebih sempit dari 220px — bingkai kecil, atau kolom di dalam layout bertingkat. Track tetap menuntut minimum 220px, dan grid pun meluber. Perbaikannya menggabungkan minmax dengan fungsi min() dari chapter Values, Units, dan Sizing:

.galeri-aman {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

Fungsi min(220px, 100%) memilih nilai terkecil: di kontainer lebar ia sama dengan 220px, di kontainer sempit ia menyusut sampai 100% lebar kontainer. Hasilnya jumlah kolom tetap dikelola otomatis, tetapi track tidak pernah menuntut lebih dari yang dimiliki — pola kartu yang tahan banting di semua ukuran.

Menulis Ulang Peta: grid-template-areas #

Sekarang bagian yang paling membedakan grid dari flexbox. Bila markup memuat elemen-elemen bernama, kita cukup menulis ulang petanya per breakpoint — tidak ada satu pun properti layout pada elemen yang berubah:

.halaman {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  grid-template-areas: "kepala" "utama" "samping" "promosi" "kaki";
}
.kepala { grid-area: kepala; }
.utama { grid-area: utama; }
.samping { grid-area: samping; }
.promosi { grid-area: promosi; }
.kaki { grid-area: kaki; }

@media (min-width: 768px) {
  .halaman {
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas: "kepala kepala" "utama samping" "promosi samping" "kaki kaki";
  }
}

@media (min-width: 1024px) {
  .halaman {
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    grid-template-areas: "kepala kepala kepala" "samping utama promosi" "kaki kaki kaki";
  }
}

Demo berikut memakai versi ringkas dengan satu breakpoint 560px — sengaja lebih rendah dari 768px karena bingkai demo berjalan pada lebar kolom artikel, bukan lebar layar penuh. Perkecil jendela browser untuk melihat wajah mobile-nya:

Ketiga peta di atas menghasilkan tiga susunan berbeda dari markup yang tidak disentuh sama sekali — janji chapter grid-template-areas di section CSS Grid. Mari kita baca petanya:

1. Peta dasar — satu kolom, lima wilayah bertumpuk. Setiap string kutip adalah satu baris grid; urutan wilayah di dalamnya menentukan urutan tampil di layar.
2. 768px — dua kolom. samping disebut pada dua baris berurutan di kolom kanan, sehingga wilayah itu membentang memanjang sementara utama dan promosi berbagi kolom kiri.
3. 1024px — tiga kolom: samping pindah ke kiri, utama di tengah, promosi di kanan; kepala dan kaki tetap membentang penuh.

Perhatikan juga minmax(0, 1fr) pada kolom konten — pengingat dari section CSS Grid agar konten lebar tidak memaksa track meluber. Nilai 560px pada demo juga contoh nyata prinsip chapter Breakpoint: batas dipilih dari lebar tempat layout mulai retak, bukan dari daftar nama perangkat.

Kesalahan Umum #

Tiga keliru yang paling sering muncul saat menata ulang peta:

Ringkasan #

repeat(auto-fit, minmax(...)) mengelola galeri kartu tanpa media query, min(220px, 100%) membuat pola itu aman di ruang tersempit, dan penulisan ulang grid-template-areas mengatur ulang halaman utuh tanpa menyentuh markup. Tata letak yang semakin canggih juga semakin banyak memiliki celah untuk rusak — keluhan yang paling umum adalah scrollbar horizontal, dan itulah topik chapter berikutnya.