.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.
.container { column-width: 250px; column-gap: 1rem; } .item { background: #ddd; display: inline-block; width: 100%; margin: 0 0 1rem; } Penjelasan column-width: 250px → browser berusaha bikin kolom selebar itu. Jumlah kolom otomatis tergantung ruang. Tapi ingat: urutan konten dibagi ke bawah (column flow), bukan baris dulu seperti grid.
.container { display: flex; flex-wrap: wrap; gap: 1rem; } .item { flex: 1 1 250px; /* grow, shrink, basis */ min-width: 200px; max-width: 1fr; /* optional */ } Penjelasan Item akan otomatis turun ke baris baru kalau tidak muat.