Cara Buat Layout Grid Dua Kolom

Grid cocok untuk kartu sejajar yang harus rata. Di editor.clincoo.buzz bungkus item dengan satu elemen, lalu atur kolom di CSS, bukan dengan tabel.

Dua kolom yang sama

display: grid dan grid-template-columns: 1fr 1fr membuat dua jalur selebar sama. gap: 1rem memberi jarak tanpa margin yang saling dorong. Anak langsung menjadi sel. Jangan lupa min-width: 0 jika ada teks panjang.

Jatuh di ponsel

Di media query max-width: 640px, ganti ke grid-template-columns: 1fr. Satu aturan itu lebih aman daripada menyembunyikan kolom. Gambar di dalam sel perlu max-width: 100%.

Cek di preview lalu deploy

Sempitkan preview dan pastikan tidak ada scroll horizontal. Simpan, lalu terbitkan dari app.clincoo.buzz. Untuk meratakan satu kotak di tengah, tetap pakai Flexbox, bukan Grid.