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
ghostmonkey
ghostmonkeyβ€’2y ago
the mainstream way to do this currently would be to use grid or flex
Bawdy Ink Slinger
Bawdy Ink Slingerβ€’2y ago
I already am
ghostmonkey
ghostmonkeyβ€’2y ago
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." ?
Mannix
Mannixβ€’2y ago
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
phyrasaur
phyrasaurβ€’2y ago
something like grid-template-columns: repeat(auto-fit, minmax(min(100%,20rem), 1fr)) oh yeah the above post
Bawdy Ink Slinger
Bawdy Ink Slingerβ€’2y ago
I had no idea you could nest min in minmax. That might be the key I've already read it
phyrasaur
phyrasaurβ€’2y ago
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:
phyrasaur
phyrasaurβ€’2y ago
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.
phyrasaur
phyrasaurβ€’2y ago
more complex nested variable and stuff
Bawdy Ink Slinger
Bawdy Ink Slingerβ€’2y ago
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
phyrasaur
phyrasaurβ€’2y ago
If the output of the said function is a length or percentage maybe? Like you can't do 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 blobsweat 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 ha
Bawdy Ink Slinger
Bawdy Ink Slingerβ€’2y ago
I get it. Thank you for the help
Want results from more Discord servers?
Add your server