Misi: kartu produk Toko Nusantara berjajar

Halaman katalog Toko Nusantara menampilkan tiga produk. Kartunya sudah punya gaya sendiri, tetapi masih menumpuk ke bawah dan memakan layar. Susun kartu itu berjajar, beri jarak yang sama, dan pastikan kartu turun baris kalau tidak muat.

Gabungan display: flex, flex-wrap: wrap, dan gap menghasilkan daftar kartu yang berjajar selama muat lalu turun baris saat ruangnya habis, tanpa satu pun media query. Lebar kartu yang tetap (width: 180px) menentukan berapa kartu yang muat dalam satu baris, dan sisanya pindah ke baris berikutnya sendiri.

Nilai align-items: stretch adalah bawaan dan membuat semua kartu dalam satu baris setinggi kartu tertinggi, sehingga tepi bawahnya rata walau panjang nama produknya berbeda. Menggantinya dengan flex-start membuat tiap kartu setinggi isinya sendiri dan tepi bawah baris menjadi bergerigi.

/* Contoh dengan ukuran lain: daftar kontak di halaman tim */
.daftar-kontak {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.daftar-kontak > .orang {
  width: 220px;
}