.wrapper {
  container: inline-size;
}

.grid {
  --preferred-size: 300px;
  --max-columns: 4;
  --column-size: calc(
    max(
      calc((100cqw / var(--max-columns)) - var(--gap-size) * (var(--max-columns) - 1)), 
      var(--preferred-size))
  );
  --gap-size: 8px;
  
  display: grid;
  gap: var(--gap-size);
  grid-template-columns: repeat(auto-fit, minmax(var(--column-size), 1fr));
  
}

.grid > div {
  background: #ccc;
}