13 replies

grid minmax

Hey, so i've noticed that if i define

grid-template-columns: repeat(2, minmax(200px, 1fr));

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));

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

flex-basis/width

allows the item to shrink?

Thanks in advance.

KP-C

Kevin Powell - Community•2y ago•

13 replies

snxxwyy

grid minmax

Hey, so i've noticed that if i define

grid-template-columns: repeat(2, minmax(200px, 1fr));

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));

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

flex-basis/width

allows the item to shrink?

Thanks in advance.

grid minmax

Similar Threads

grid minmax

Similar Threads

Similar Threads

Similar Threads