Responsive cards and auto-fit, auto-fill
Short question, and it might not have a straight forward answer. But here we go ...
In this codepen I'm testing all things responsive, and the goal is to avoid using
@media. As Kevin has pointed out in several videos, there should only be need to add complexitiy if necessary.
https://codepen.io/amarlong/pen/LYrmpNO
So my cards are controlled with auto-fit, and between view width 1280px and 960px the four cards stack out with three on top and one underneath. Is there anyway to force them to do a two over two (without @media) between that pixel range, or is this a limitation of auto-fit/fill?6 Replies
no i don't think there is a way to wrap them by two at a time. it will allways try to fill the row first and only creates a new row when a grid item doesnt fit anymore.
Just tried with
clamp() as well, but guess that's not a function that grid-template-columns will use.
So the follow up question is: How can I achieve it most elegantly without @media?What is the reason you don't want to use media queries?
No other reason then to try and see if it's possible without it. In terms of Kevin's mantra of not adding complexity if not needed, and adding a
@media feels like adding something extra.
But if it's not possible, then of course, @media it is then.if it is possible it would create a lot more complexity. a media query in this scenario is the way to go
Give and take, I guess.
Thank you again!