grid items overflow

[guybendavid]

Using a large number of grid items is causing the behavior presented in the image:

[lucaslarroche]

Hi @guybendavid,

I don't see a bug here.
This seems to be the expected behavior of CSS grid in browsers.

What behavior should it have?
Pico could force a wrap. But it is highly dependent on the content and layout of the site.

This problem is typically a case where developers need to adapt Pico's CSS code.
I don't think it's good that Pico sets a minimum width value for items.

In your case, you could do something like that:

.grid {
  --grid-min-value: 4rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-value), 1fr));
}