CSS Grid: Intrinsically wrapping grid items in groups of two or three?
I have a series of grid items that I'd like to wrap cleanly so that I don't get hanging card “orphans”. Currently I have 4 items, but there could be 3 or 6 or 8 items (let's ignore 5 and 7 for now).
With four items, I'd like to have either:
1 × 4, 2 × 2, or 4 × 1 layouts
(but not 3 + 1)
With six items, I'd like to have either:
1 × 6, 3 × 2, 2 × 3, or 6 × 1 layouts
(but not 4 + 2 or 5 + 1)
I know I can hard-code this using manually set breakpoints and media queries, or that I could wrap the list of items into groups of two or three, but I'd like to avoid that (not least because the divs would interleave each other). Can this be done intrinsically, for example using auto-fit or some other method?
Starting from Kevin's short on even pairs: https://www.youtube.com/shorts/scaiYZISGpk I prepared a codepen:
https://codepen.io/jools-r/pen/yyYRBJV
This works well for 2 × 2 or 4 × 1 but not for 1 × 4, 2 × 3, or 3 × 2. As a mobile MQ is likely, the single-column case can be solved that way.
Maybe there's a way of combining Kevin's "How to set max-columns using auto-fit" (https://www.youtube.com/watch?v=CHULPvkXIRo) with "modular queries" (https://alistapart.com/article/using-css-mod-queries-with-range-selectors/) to test for item lengths divisible by two and three?
Thanks for any ideas ...
Kevin Powell
YouTube
Grid auto-fit, but with even number of columns only
Grid's auto-fit is awesome, but it can do more than I initially realized! If you add more grid tracks, they get included in the columns that are being made, which means you can enforce having even numbers of columns if you need to.
#css #grid #tipsandtricks
Kevin Powell
YouTube
How to set max-columns using auto-fit or auto-fill
It takes a little bit of work, but we can relatively easily take control of CSS Grid’s auto-fit (or auto-fill) by using a
calc() to help set an upper limit on how many columns it creates.
🔗 Links
✅ The code from this video: https://codepen.io/kevinpowell/pen/GgRwqxJ
✅ The second version using attr(): https://codepen.io/kevinpowell/pe...erinlynch
A List Apart
Using CSS Mod Queries with Range Selectors
When you distractedly agree to do something that you then realize you don’t actually know how to do, what do you do? Briefly panic, and get down to work. Patrick Clancey comes up with a little arse…
5 Replies
I've achieved a compromise using CSS flex and the CSS "modular number" queries from the ALA article. Here's the Codepen:
https://codepen.io/jools-r/pen/MYazXxp
It requires using calc() inside a media query and is compromised by the fact that you can't (apparently) use CSS variables inside those calcs.
As such, it's not really very portable as it requires calculating the container width and also making educated minimum width guesses that fit the situation. You could achieve this using SASS variables.
Again, suggestions for improvements are welcome.
And here's an update to the original CSS Grid variant paired with "modular number" queries:
https://codepen.io/jools-r/pen/yyYRBJV
is compromised by the fact that you can't (apparently) use CSS variables inside those calcs.Yup, we can't do that, at least for now. The issue is that media queries can't see custom props, because they're all scoped to something (:root is the html element). Even if you nest a media query, it's just a dev experience thing, and the browser essentially unnests it behind the scenes. They are working on a spec for environment variables, which are declared like
@ rules are, and don't have to be part of a rule. The only thing is, pretty sure they won't be modifiable... be sortof like a const in that respect, so it can change project to project, but you wouldn't be able to update it from one grid to the next.
As for your solution, it looks good! With where things stand now, it's as good as it'll get I think.Thanks for the feedback! I can't help thinking it must be possible to do it better so it will work in different positions in the layout. If you used this setup in, say the main column of a main-col+sidebar layout, you'd need to change your width calculations completely.
But, for now, I've solved my immediate problem.
You could switch out the
@media for an @contanier 🙂