Hey folks.
This is my favourite line of CSS:
grid-template-columns: repeat( auto-fill, minmax(min(calc(180px + 12vmin), 100%), 1fr)...
For further actions, you may consider blocking this person and/or reporting abuse
I love this and I love that you explain how it works.
Thanks for taking the time to check out, Emily. I'm glad you found it valuable!
What's pros and cons compared to general grid? Because grid template columns with fr fr fr value is repeatable too?
This is grid (one of its many possible configurations at least). I should have called out the needed accompanying ‘display: grid’ (it’s hidden in the codepen)
Oh, I see. By the way, using var on grid (and another style value) can't be rendered by Opera Mini with extreme mode, isn't it?
min() is quite new and only in evergreen browsers.
Grid-auto-columns is not in IE but is in Opera Mobile. To be honest I’ve never tested in opera mini, but this could degrade pretty gracefully with a simpler fallback grid.
This is great! It never occurred to me to use a
min()insideminmax(). Super useful.Doesn’t justify-items and/or justify-content : center help with the last line thing?
They would in a flex layout I think! Within grid, those properties seem to align the items/content within their existing row or column, but not affect the placement of the items themselves.. in a way it makes sense, though, since a grid is.. well, a grid—so the columns and rows are continuous throughout the entire grid
Ah yes you are right. I have come across similar situations where what I need is some kind of blend of flex and grid
Yeah often what feels like grid ends up being better off flex. I might mess around A bit and see what the closest flex version of this I can come up with
Super cool.