Kevin Powell - CommunityKP-C
Kevin Powell - Community15mo ago
13 replies
snxxwyy

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.
Was this page helpful?