CSS grid, setting maximum span
Is there a way to set a max value for CSS grid-column: span such that it takes up n-columns maximum or spans across all available columns if there are fewer than that?
If I use span in a grid with auto-fill it'll forces additional columns even when there isn't space for any and makes them look weird.
5 Replies
Maybe
min()/max()/minmax()
can help you? If you use it with fr
as max it won't add new columns.you can take a look at this
https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/
Mike Herchel
CSS-Tricks
An Auto-Filling CSS Grid With Max Columns of a Minimum Size | CSS-T...
Within Drupal 10 core, weβre implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world.
Not the max columns there but like,
if I put
span 3
on something it'll force the grid to have 3 columns and it'll have zero width for the ones that don't naturally fit, is there some way to do it such that I can say "take up 3 columns at maximum otherwise span across however many there are"
You can use
column-start/end
with negative numbers to count from the right side.
But if I understand you correctly, you will probably need media queries or JS for that.That would be nice, but no, we don't have a way to do that. You could probably do some craziness with
:nth-child
and use the ~
combinator to come up with a solution, but it would involve manually having to figure out every possible combination based on it's location in the grid and how many siblings follow it, which sounds like an absolute nightmare π. JS is the way for this, if you really need it.