Responsive grid column count w/o using media queries?
I want a responsive grid where columns shrink and grow to fill the container: on small viewports, I want one column; on medium viewports, I want two columns; and on large viewports, I want a maximum of three columns.
This is easy to do with media queries as shown here: https://codepen.io/academyoff/full/xxaJabZ
But is there a way to achieve this without media queries?
The problem is, even at the smallest viewport, the cells have enough space to collapse into 3 columns.
12 Replies
the mainstream way to do this currently would be to use grid or flex
I already am
your code looks fine to me
now that i am looking at it 😄
what do you mean by "The problem is, even at the smallest viewport, the cells have enough space to collapse into 3 columns." ?
Sara Soueidan
CSS-Tricks
Auto-Sizing Columns in CSS Grid:
auto-fill vs auto-fit | CSS-Tr...One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a
something like
grid-template-columns: repeat(auto-fit, minmax(min(100%,20rem), 1fr))
oh yeah the above postI had no idea you could nest min in minmax. That might be the key
I've already read it
I found it somewhere in a comment section or something, I can't remember. From a quick search:
https://css-tricks.com/intrinsically-responsive-css-grid-with-minmax-and-min/
Chris Coyier
CSS-Tricks
Intrinsically Responsive CSS Grid with minmax() and min() | CSS-Tricks
The most famous line of code to have come out of CSS grid so far is:
Oh and if you want a max column number
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.
more complex nested variable and stuff
So when the spec says that it accepts a length or percentage, does that always include a min/max as an option?
I ask because I have been reading mdn a lot before I ask this question and I never knew you could do this
If the output of the said function is a length or percentage maybe? Like you can't do 
you can use
min(max-content, 1rem) for example
grid functions are different from math functions
minmax() is a grid function, min() and max() are math functions
I dunno if you get my point you can use min() and max() everywhere, but minmax() is specifically for grid
so each grid function has their own acceptable value/argument, but it's not strictly math, but you can include math functions in places that accept mathematical numbers
I dunno if I make sense
haI get it. Thank you for the help