CSS Grid Column Responsive

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.item {
  background: #eee;
  padding: 1rem;
  border-radius: 8px;
}

Penjelasan

• auto-fit → kolom akan collapse kalau tidak cukup ruang.
• minmax(200px, 1fr) → lebar kolom minimal 200px, tapi bisa melebar maksimal mengisi baris.
• Jadi jumlah kolom otomatis berubah sesuai lebar layar, tanpa butuh breakpoint.