Grid Template Shorthand

[Technobabble17]

I work a lot with the 12 column grid layout, and it's apparent that tailwind finds the 12fr layout vital as there are classes for both columns and rows. I also find it cumbersome to manage col-start/end and span states when dealing with breakpoints and logic states. (Also I'm sure I can make this into my own plugin, just thought it would be a nice addition to core)

What if there was shorthand support for col-start/end row-start/end:

ex.)

cols-1-7

(col-start-1, col-end-7)

**cols-4

(col-start-4)**

rows-7-11

(row-start-7, row-end-11)

cols-full

(grid-column: 1 / -1) to avoid switching between col-span and this shorthand syntax

<div class="grid grid-cols-12 gap-4">
    <div class="bg-lime-500 h-24 col-span-full md:col-span-5 @if ($imageRight) md:col-start-7 @else md:col-start-2 @endif"></div>
    <div class="bg-blue-500 h-24 col-span-full md:col-span-4 @if ($imageRight) md:col-start-2 md:row-start-1 @else md:col-start-8 @endif"></div>
</div>

Shorthand version:

<div class="grid grid-cols-12 gap-4">
    <div class="bg-lime-500 h-24 cols-full md:cols-2-6 @if($imageRight) md:!cols-7-12 @endif"></div>
    <div class="bg-blue-500 h-24 cols-full md:cols-8-11 @if($imageRight) md:!cols-2-6 md:rows-1 @endif"></div>
</div>

(I'm cheating with !important to avoid an else statement, but) I find this easier to read.

Other notes:

I would imagine "grid-cols-2-4" might fit the naming scheme better, but:

1. it's longer
2. "col-- is already a convention

this syntax would *probably work with any grid system (grid grid-cols-8)

it could be made extensible from gridTemplateColumns (grid-cols-16 -> cols-9-17)

spans are powerful for repeating layouts, but difficult when trying to position specifically around state

[yasare16]

This is actually a brilliant idea. A shorthand would be so useful for projects that constantly utilize grids. I also don't see any wild conflicts with the current system. Really hoping for consideration on this idea!