CSS quick maffs

You need to make a responsive grid that should wrap its columns on smaller screens. That's whay you do:

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, auto));
}

Replace 15rem with minimal width of a grid cell. Putting 0 there is bad because columns won't wrap then.

Now, let's make our task harder. We want the same grid, but we want say 4 columns max. That's what we should do:

.grid {
--columns: 4;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(15rem, (100% - (var(--columns) - 1) * 1rem) / var(--columns)), 1fr));
}

--columns regulate the maximum amount of columns we can have.

Aight bye