Andrew's Digital Garden

CSS Grid Blowouts

1fr is closer to minmax(auto, 1fr), which means that the element itself is responsible for setting its on minimum width. If the grid item's content size is greater than the available space the 'fractional unit' (1fr) can find, the grid item will not shrink to conform to the grid.

The solve is to set the minimum width of the element to 0, allowing it to shrink - minmax(0, 1fr)or min-width: 0.

https://codepen.io/ajosedev/pen/OeERWQ?editors=1100 https://css-tricks.com/preventing-a-grid-blowout/

[[css]] [[cssgrid]] [[layout]]

CSS Grid Blowouts