More elegant fit for elements auto stacking than grid-template-columns: repeat(auto-fit, n);
As you can see on the pictures, that empty space is eventually created on certain screen sizes that look super ugly. Any more dynamic and elegant ides where cards will fill up all the space and eventually stack like in the picture, outside of hard codding it for each screen size?
CSS code:
33 Replies
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr);
something like that, you can magic number your rem to find the right size you want
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr); or something like this too
Don't be afraid of using a media query though often times that is just what you need to make things fit how you want š„²What b1mind said is good! However, flex with a flex wrap may also work for your situation. Just depends on exactly what you're going for
@Dovah
Flex works much differently though, and not sure shrink/grow would work for wrapping things and filling things as well as grid.
not sure... I mean I am sure it does not do as well of a job at this.
It does indeed, 100% depends on what they're exactly going for
š¤·āāļø depends what you need and how you need it to behave though for sure.
Will test the first solution and come back with results, but I'm pretty sure that is what I want!
I prefer the grid approach myself. They just didn't quite give a good explanation in terms of what they want it to do fully
Again don't be afraid to use a media query at a breakpoint either, not something to avoid just not something to go overboard with.
I did thought about wrap, but I'm pretty sure I had similar situation in past project and I went with grid, that is where I pulled the code I showed you. xD
Either way, will come back when I get to work on project! Thanks for all the help
Oh it is a media query, I'm just always wondering about more dynamic aproaches, as Kevin himself teaches us. xD
When I can't thing of any, or if it is easier I do go with more breakpoints.
think*
Yup. xD I always drop just a bite to not bother too much, since it's usually simple solution, but in general there are always more options and it is a guessing game when you try to answer without me bringing more info. xD
Damn, it works perfectly
Thanks!
xD
So basically it's 1FR width until room for my custom size is created?
@b1mind
min max works the same here so its 320px min or 100% (so it can contract smaller if needed) and max of 1fr which works like normal. The key is the auto-fit keyword which will "fit" the remaining space until the min is hit. Thats how my mental model has it at least xD
Fun fact is you can actually do two minmax() in auto fit as a repeat too
Well two being any number xD
so tech you could auto-fit/fill a repeat of things like this
Ok that is brain overflow for now xD
Will need to absorb it later xD
yea I don't know how often you would do that but shows how auto-fit works.
Wait How do I resize it horizontaly in codepen?
xD
Ok I just f12-ed
xD
I keep my code blocks to the side so I can just grab the middle bit and drag around. But yes devtools also š
Oh xD
Hmmmm
super interesting
Will bookmark it and analyze it later
But yes, that is peprfect solution for what I asked
!
glad that worked for ya! š¤
marked solved (tag)
Is there a height only version?
Nto sure If I'll need it
though
Like for card to go from ex: 212px to 240px
?
Height-vise
don't restrict heights
let the content be free
Rips my shirt off
jk
the more you define
height the worse your life will be in CSSWELL tell that to project designer xD
But yes I understand
I was just wondering
I mean thats our job to tell them
š
pixel perfect is a lie
It's free project so I can only complain with imaginary designer xD
not something that fits the constraints we have as "responsive" web developers
Its up to you to code it in such away
Yup! I shoul definetely start NOT* going pixel perfect
no its a lie
fixed
xD
Stop trying for pixel perfect its counter productive to responsive design
there ya go ! hahah
I'm shaking my rust off, both code vise and brain strain vise, so I'm just going with less resistance route instead, so what I see I do, not much thinking to not overload myself.
xD
Either way, thanks! Spot on with solution. No more rambling
Woah. I don't even understand what the two mimax are doing here, i assumed it would be something like
* EDIT: OH!! I've needed this behaviour and told it wasn't possible. It's repeating the two cols, one is set by the first minmax 300px,1fr; the second set by the second minmax (n)px, 0.5fr. Sooo cool!!! * Very cool to know it's possible though will have to play around!
repeat(autofit, minmax( minmax(0px, 300px), 1fr) ). Basically a nested minmax instead of a min(). But this is just two in a row. How does it know which to choose?* EDIT: OH!! I've needed this behaviour and told it wasn't possible. It's repeating the two cols, one is set by the first minmax 300px,1fr; the second set by the second minmax (n)px, 0.5fr. Sooo cool!!! * Very cool to know it's possible though will have to play around!