Fluid columns, max 3
I wanted a grid of max three columns, which would shrink to two or one column if needed. I could never solve it in a single grid-template
, and resorted to media queries.
Recently, I picked up a neat trick from Chris Coyier:
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(12rem, 100%/3)), 1fr));
This is the way. Much better than querying screen width, this responds to the width of the grid. You don’t even need a container query. Neat!
Also neat: In min()
and max()
, you can do maths without calc()
. I didn’t know that.
Complicating factor
If you have a grid-gap
, the grid above will max out at two columns, not three.
This happens because three columns sized 100%/3
will not fit when there are gaps between them. You can work around it with 100%/4
, as if you wanted four columns. (Chris Coyier did.) You will get three, as long as the gap is there to force it back down.
Alternatively, and perhaps neater, subtract one gap: 100%/3 - 1rem
In complex formulas like this, I like to make my intention clear by using variables.
--max-columns: 3;
--min-column-width: 12rem;
--gap: 1rem;
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(
min(100%, max(var(--min-column-width), 100%/var(--max-columns) - var(--gap))),
1fr));
grid-gap: var(--gap);