grid minmax
Hey, so i've noticed that if i define
grid-template-columns: repeat(2, minmax(200px, 1fr));, when the viewport shrinks, the element that has the min of 200px on it overflows the container due to the fact it can't shrink below 200px. This can be fixed with grid-template-columns: repeat(2, minmax(min(100%, 200px), 1fr));, but i was wondering if there's a more basic solution, something similar to flexbox maybe where even defining a flex-basis/width allows the item to shrink?
Thanks in advance.6 Replies
auto-fit and auto-flow
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
oo sorry miss understood
I'm not sure there is I know Kevin does a similar thing in his template with calc.Oh okay, minmax isn’t really efficient then If it causes overflow by default unless you have these little hacky fixes then right? But then again, maybe they had the idea that flexbox would handle these sorts of layouts if you wanted that functionality
Is that template public?
You want one column to shrink before the other right?
but yes if you want it to go below the min you have to set another min
that is why in minmax() you need another calculation
cause its a min and a max
Yeah essentially. Ohh okay that makes more sense. Thanks
I think so? its from his recent stream, I just forked it https://codepen.io/b1mind/pen/oNKYKjv
oh okay, i see, it's similar, that's reassuring, thanks