Grid auto-fit
Hello! I am trying to make two different columns in grid become one without using media queries.
I want one of them to be 1fr and the other auto.
The one that is auto should never be smaller than 10rem, and the main one shouldnt be smaller than 20rem.
I tried this, but it doesnt work.
repeat(auto-fit, minmax(20rem, 1fr) minmax(10rem, auto))
14 Replies
Repeat only takes the two values, so that's just not valid.
No need to avoid media queries they are just a tool and a nice one.
So just take out of the repeat auto fit and use those minmax as columns, change with a query when you need.
Yeah, I know. But I wanted to explore the tool =))
https://codepen.io/b1mind/pen/PoXjRBE
ah well yea repeat(value, value)
it only can take take the two its meant to do what its name is and repeat the size over. auto-fit/fill are just a unique value for it.
It is actually valid the one I put there. But it doesnt work the way I wanted it to
mm you right it does its valid but I'm not sure what it would do
interesting xD
mm I stand corrected it can take more than one value
TIL
you can even set line names xD
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
not sure how that would work with auto-fit/fill though.
haha it does wild
So its actually trying to auto fill both cols 😮
https://codepen.io/b1mind/pen/PoXjRBE
but then collapses in on it selfSee, if I do it like this, it works
repeat(auto-fit, minmax(320px,1fr))
cause that is how it works, that is correct syntax for the pattern of auto-fit/fill
I just dont know ho to do it with two differente column sizes
I don't think it can xD
honestly, I've never seen anyone try this but it has very unintended behavior.
Like the repeat happens when it can fill
but it does not make a new row when there is not room
mmm yea it does idk seems to work
See, this is possible. I just testes the code below in another part of my code
repeat(auto-fit, minmax(100px, 200px) minmax(200px, 300px))
Which I had no idea till now that it even would.
yea it works
I updated my pen seems to work as it should
had to use lower values too 😄 (to actually see it working)
! blowing my mind right now
hahaha 🙂
well wait
I still don't know if its making proper rows still ahah
something seems off
nope yea it all works wild
TIL! ty for this kinda made my day
Stand corrected! and learned something I will probably abuse at some point haha
https://codepen.io/b1mind/pen/PoXjRBE
I'm going to update this with some images or figure/caption something card like good use case