CSS 09: Membuat Layout Baris dan Kolom dengan Grid

CSS Grid membantu menyusun elemen berdasarkan baris dan kolom. Grid cocok untuk galeri, daftar produk, dashboard, dan kerangka halaman dua dimensi.

1. Demo Grid Responsif

2. Kolom dan Satuan fr

Grid diaktifkan pada induk dengan display: grid. Satuan fr berarti bagian dari ruang yang tersedia. repeat(3, 1fr) membuat tiga kolom sama lebar.

Demo menggunakan repeat(auto-fit, minmax(min(220px, 100%), 1fr)): jumlah kolom menyesuaikan ruang, tiap kolom menargetkan lebar minimal 220px, tetapi tetap aman pada container yang lebih sempit.

3. Baris dan Penempatan Item

grid-auto-rows: minmax(140px, auto) memberikan tinggi minimum sambil membiarkan baris bertambah mengikuti isi.

grid-column: 1 / -1 membuat judul memenuhi semua kolom. grid-column: span 2 membuat item utama memakai dua kolom. Pada layar sempit, media query mengembalikannya menjadi satu kolom agar tidak meluap.

4. Grid atau Flexbox?

Gunakan Flexbox untuk satu baris atau satu kolom. Gunakan Grid ketika baris dan kolom perlu diatur bersama. Keduanya dapat dipakai dalam satu halaman.

Kesalahan yang Sering Terjadi

• Memberi grid-template-columns pada item, bukan container.
• Menganggap fr selalu sama dengan persentase.
• Menggunakan terlalu banyak kolom tetap sehingga halaman meluap.
• Mengatur tinggi tetap pada kartu yang isinya dapat bertambah.

Latihan

Ubah lebar minimum kolom dan jumlah item. Buat item kelima memenuhi semua kolom menggunakan grid-column: 1 / -1.

Ringkasan

Tentukan kolom dengan grid-template-columns, bagi ruang menggunakan fr, ringkas pola memakai repeat(), beri jarak melalui gap, dan buat grid fleksibel dengan auto-fit serta minmax().