Suggestion: Grid columns built in (tiny change for huge functionality)

[ethanpil]

I know officially Pico documentation reads

As Pico focuses on native HTML elements, we kept this grid system minimalist.

A complete grid system in flexbox, with all the ordering, offsetting, and breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.

I would like to propose the following tiny addition to Pico which provides probably 99% of the use cases for grid type layouts without "all the ordering, offsetting, and breakpoints utilities" were trying to avoid.

The issues I had with the current implementation is that each row needs a new div and its very cumbersome when generating repeating blocks. Additionally many layouts need some variation of grid columns...

Here is a demo link.

I would love to know your thoughts. Since I dont want to recompile Pico I use them as a second class like this: <div class="grid grid-4">...</div> but certainly we can eliminate the need for the first grid class if that makes more sense.

Can make a PR if the community is interested. @lucaslarroche :)

.grid-2 {
   grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
   grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
   grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
   grid-template-columns: repeat(6, 1fr);
}
.grid-8 {
   grid-template-columns: repeat(8, 1fr);
}

@media only screen and (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-8 {
     grid-template-columns: repeat(1, 1fr);
  }
}

[Deufel]

Just a follow up to this another usefull simple grid change is....

grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))

Note its helpful to remove the bottom margin from the items in the grid

[ehausen]

I think it perhaps would be more in the spirit of Pico to define your columns per site or elements basis without helper class.