Grid Span Utility Class

[pietz]

I understand that PicoCSS takes a very minimal approach, which is why the grid system is also similarly simple. I still want to suggest utility classes for the span of a grid column because with this the grid becomes a lot more powerful and useful.

I'm making the numbers up as I type but I want to imagine that 50% of people that want to use a grid are too limited with Pico's current offering. The one feature that people will miss the most is defining a column to be wider than one element. Having this option would allow so much more flexibility and yet the implementation is straight forward. I think this easily covers the need of 90% of people without needing custom CSS or the Bootstrap grid on top.

I think the final solution would be something like this:

@media (min-width: 768px) {
    .grid>.span-2 {grid-column: span 2;}
    .grid>.span-3 {grid-column: span 3;}
    .grid>.span-4 {grid-column: span 4;}
}

So this...

<div class="grid">
    <div class="span-2">I'm twice as wide...</div>
    <div>...as me</div>
</div>

...would work. In my mind span-2, span-3 and span-4 is more than enough.

What do you think?

[infografik]

I think there is nothing stopping you from adding your own grid module to scss and using it whenever needed. In my case this is not often needed, so I prefer minimal code in Pico scss source files. Speed above all...

[dev-willis]

Why use utility classes at all? Seems a bit too tailwindy to me. Creating a bunch of utility classes to try and abstract CSS grid away seems to me harder and more cumbersome than just using the actual CSS grid.

[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.