Layout responsif

Gunakan grid dan media query untuk layar berbeda.

Pahami konsepnya

Grid membantu menyusun kartu dalam kolom. Media query mengubah aturan ketika lebar layar melewati batas tertentu, sehingga konten tetap nyaman dibaca di ponsel.

Grid bekerja lewat properti display: grid pada wadah: grid-template-columns: repeat(3, 1fr) membelah tiga kolom selebar sama, dan gap memberi jarak antar sel tanpa perlu margin. Anak-anak wadah otomatis menempati sel-sel itu berurutan — tanpa float, tanpa trik.

Media query menyaring kapan aturan berlaku: @media (max-width: 700px) { ... } hanya aktif saat lebar layar 700px ke bawah. Di dalamnya kita menimpa tata letak desktop — misalnya mengubah tiga kolom menjadi satu — sehingga halaman yang sama nyaman dilihat di layar mana pun. Pasangan grid + media query ini adalah fondasi web modern yang responsif.

Coba contoh kode

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

Di layar lebar ada tiga kolom. Pada lebar 700px atau kurang, kartu menjadi satu kolom.

Latihan singkat

Tambahkan aturan untuk dua kolom pada layar tablet.