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.
This also can happen with minmax too. The minimum can never be shrunk further, which is an issue when it goes down to one column.
This can be solved with min.
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
// improved
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
https://css-tricks.com/intrinsically-responsive-css-grid-with-minmax-and-min/
[[20240911092124-flex-blowouts]]
https://codepen.io/ajosedev/pen/OeERWQ?editors=1100 https://css-tricks.com/preventing-a-grid-blowout/
[[css]] [[cssgrid]] [[layout]]