Cara Membuat Layout Responsive dengan CSS Grid untuk Pemula

CSS Grid memungkinkan kamu menyusun baris dan kolom sekaligus, lalu mengubah susunannya saat lebar layar berubah. Cara membuat layout responsive dengan CSS Grid dimulai dari menentukan jumlah kolom, memberi jarak antar item, dan menambahkan media query untuk layar kecil. Ketiga langkah itu sudah cukup untuk membuat halaman yang rapi di ponsel maupun desktop.

Struktur HTML yang Perlu Disiapkan

Grid bekerja paling mudah ketika markup kamu sederhana. Buat satu wadah utama, lalu isi dengan beberapa bagian seperti header, navigasi, konten, sidebar, dan footer.

<div class="layout">
  <header class="header">Header</header>
  <nav class="sidebar">Navigasi</nav>
  <main class="content">Konten utama</main>
  <aside class="extra">Info tambahan</aside>
  <footer class="footer">Footer</footer>
</div>

Nama kelas bebas kamu ubah. Yang penting, setiap bagian punya elemen sendiri sehingga bisa ditempatkan di kolom yang berbeda.

Menentukan Kolom dan Baris

Properti display: grid mengubah wadah menjadi grid. Setelah itu, tentukan jumlah kolom memakai grid-template-columns dan jarak antar sel dengan gap.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
}

Nilai 1fr berarti satu bagian dari ruang yang tersisa. Dua kolom 1fr akan membagi sisa lebar secara merata. Satuan px dipakai untuk kolom yang lebarnya tetap, misalnya sidebar.

Menempatkan Setiap Bagian

Gunakan grid-column dan grid-row untuk mengatur posisi. Nomor baris dan kolom dihitung dari garis grid, bukan dari sel.

.header {
  grid-column: 1 / -1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.content {
  grid-column: 2 / 4;
  grid-row: 2;
}

.extra {
  grid-column: 2 / 4;
  grid-row: 3;
}

.footer {
  grid-column: 1 / -1;
}

Tanda / -1 berarti elemen membentang sampai garis terakhir. Header dan footer jadi selebar wadah, sementara konten memakai dua kolom sekaligus.

Menambahkan Media Query untuk Layar Kecil

Layout tiga kolom akan terasa sempit di ponsel. Tambahkan media query yang mengubah susunannya menjadi satu kolom saat lebar layar di bawah 768 piksel.

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .header,
  .sidebar,
  .content,
  .extra,
  .footer {
    grid-column: 1;
    grid-row: auto;
  }
}

Dengan grid-row: auto, setiap elemen kembali ke urutan alaminya. Kamu tidak perlu menulis ulang nomor baris satu per satu.

Menggunakan minmax dan auto-fit

Kalau jumlah kartu tidak tetap, minmax dan auto-fit menghemat banyak baris kode. Grid akan mengisi kolom sebanyak yang muat.

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

Coba ubah ukuran jendela browser dan perhatikan kartu berpindah baris sendiri. Pola ini berguna untuk galeri produk atau daftar artikel.

Tips: buka DevTools dengan F12, lalu pilih mode perangkat untuk menguji berbagai lebar layar tanpa perlu membuka ponsel.

Pola Layout yang Sering Dipakai

Beberapa susunan muncul berulang di banyak situs. Mengenal polanya mempercepat pekerjaan karena kamu tinggal menyesuaikan.

• Sidebar kiri dan konten kanan: cocok untuk dashboard atau dokumentasi.
• Dua kolom sama besar: pas untuk halaman perbandingan atau form berpasangan.
• Header, konten, footer bertumpuk: pilihan aman untuk blog dan halaman artikel.
• Galeri otomatis: memakai auto-fit dan minmax untuk kartu berukuran seragam.

Kesalahan Umum Pemula

Beberapa masalah muncul terus saat pertama kali memakai Grid. Mengetahui penyebabnya menghemat waktu debugging.

1. Lupa display: grid sehingga properti lain tidak berpengaruh.
2. Menghitung nomor garis dari sel, bukan dari garis grid.
3. Menetapkan lebar tetap pada wadah sehingga 1fr tidak punya ruang untuk membagi.
4. Menaruh media query sebelum aturan utama sehingga tertimpa.

Kalau ada properti yang tidak berefek, periksa dulu apakah elemennya benar-benar anak langsung dari wadah grid. Grid hanya mengatur elemen satu tingkat di bawahnya.

Merapikan Jarak dan Perataan

Gunakan justify-items untuk perataan horizontal dan align-items untuk vertikal. Nilai start, center, end, dan stretch berlaku di keduanya.

.layout {
  align-items: start;
  justify-items: stretch;
}

Kalau hanya satu elemen yang perlu diatur, tulis propertinya langsung di elemen tersebut, misalnya justify-self: center pada tombol di dalam sel.

Ringkasan

Layout responsive dengan CSS Grid berdiri di atas tiga hal: tentukan jumlah kolom, tempatkan elemen memakai nomor garis, lalu ubah susunannya lewat media query. Setelah pola dasar ini dikuasai, kamu bisa menambahkan auto-fit dan minmax untuk susunan yang menyesuaikan sendiri. Latihan paling cepat adalah menyalin contoh di atas, mengubah angka kolomnya, dan melihat hasilnya langsung di browser.

Pertanyaan yang Sering Diajukan

Apakah CSS Grid bisa dipakai bersamaan dengan Flexbox?

Bisa, dan sering memang begitu. Pakai Grid untuk menyusun kerangka halaman, lalu Flexbox untuk mengatur isi di dalam satu baris atau kolom, misalnya menu navigasi atau deretan tombol.

Berapa jumlah kolom yang ideal untuk layout responsive?

Tidak ada angka pasti. Untuk halaman dengan sidebar, dua sampai tiga kolom sudah cukup. Kalau isinya kartu berukuran seragam, biarkan auto-fit yang menentukan jumlah kolom sesuai lebar layar.

Apa bedanya 1fr dan auto pada grid-template-columns?

1fr mengambil bagian dari sisa ruang secara proporsional, sedangkan auto menyesuaikan diri dengan ukuran isinya. Kolom berisi teks panjang biasanya lebih pas memakai auto atau minmax.