CSS Grid items overflowing container with minmax

CSS Grid items overflow their container when using grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) on narrow screens. The grid doesn't wrap — it creates horizontal scroll.

The minmax(300px, 1fr) means items will NEVER be smaller than 300px. On screens narrower than 300px + gap + padding, this causes overflow. Fix: use minmax(min(300px, 100%), 1fr) to clamp the minimum to the container width. Alternatively, use a media query to switch to grid-template-columns: 1fr on small screens.

minmax's first argument is a hard minimum. The min() function creates a responsive floor that adapts to available space.