The magic of auto-fit and auto-fill (and the difference between them)

.grid {
  display: grid;
  gap: var(--gap, 1rem);
  grid-template-columns: repeat(
    var(--grid-type, auto-fit),
    minmax(min(180px, 100%), 1fr)
  );
  grid-auto-rows: 120px auto auto;
  container-type: inline-size;
}

https://codepen.io/kevinpowell/pen/yyLYoZO

https://www.youtube.com/watch?v=OZ6qKoq7RJU