Let's break these down.
--gap: clamp(1rem, 4vw, 2rem);
gap will be our side margin, allowing it to stretch up to 2rem at max, with a preferred width of 4vw, but never going below 1rem.
--full: minmax(var(--gap), 1fr);
We're going to use the minmax() function for these next three measurements to say: "If there's room in the CSS Grid, you can expand out to here but then don't go smaller than the minimum".
The full area is going to expand from left edge to right edge (remember we have to split the areas to allow for the other columns) and will double as our margin, so we'll pop in our gap value as our minimum and tell it that it can expand up to 1fr, or basically as much space as the rest of the grid will allow it.
--feature: minmax(0, 12vw);
--popout: minmax(0, 2rem);
The feature and popout both have a minimum value of 0. This is what powers our disappearing columns! As other areas of the grid expand, these will collapse when there's no longer any room for them, essentially taking up no space.
--content: min(clamp(30rem, 52vw, 60rem), 100% - var(--gap) * 2);
And then finally, our content area is our most complex measurement. It's saying, take the minimum value of either:
- A fluid measurement that can be 30-60rem (with the help of
clamp())
- OR full width minus our gap value (but doubled for both left and right values).
These measurements can be changed to fit the needs of your layout. Specifically the feature and popout maximum values and the first content value. For example, our use of vw for the feature means it will fluidly expand out as the screen grows whereas the popout will remain only 2rem larger on each side than the content column.
Now we can assemble these measurements in a CSS grid column definition. We'll name our column edges with [custom-ident] and use the -start and -end endings to help make assignment easier later on.
