Jeroen Reumkens PRO
Preview
.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;
}