Add col-span helper classes for grid

[harrison314]

I've been playing around with PicoCSS for a while and I like its use of semantic HTML. But one thing I really miss when using a grid is that I need to split the main area in different ratios, like 2:1.

Eight came up with this solution:

<div class="grid">
  <div class="col-2">
    main content
  </div>
  <div>
   side content or nav
  </div>
</div>

.col-1 {
    grid-column: span 1;
}

.col-2 {
    grid-column: span 2;
}

.col-3 {
    grid-column: span 3;
}

.col-4 {
    grid-column: span 4;
}
.col-5 {
    grid-column: span 5;
}

Wouldn't it be possible to add something like this directly to the framework?

[ricpastori]

This request has appeared a few times, so I think it identifies a documentation need, but I would avoid adding a numeric span utility API to Pico.

span-2, span-3, and similar classes assume a particular track model. Their behavior becomes less predictable when an intrinsically responsive grid changes its number of columns, and the API quickly grows into breakpoint, reset, offset and responsive variants.

A documented 2:1 layout recipe, or a local custom property consumed by an application’s grid, would preserve Pico’s small grid abstraction without starting a second utility framework.