[Feature proposal] Support for named grid lines

[horuskol]

Having named grid lines would be useful for some grid layouts, especially responsive designs, and when adding lines to an existing grid.

For example, starting with these two layouts:

gridTemplateColumns: {
  'layout': '1fr 2rem calc(768px - 4rem) 2rem 1fr',
  'md-layout': '0 2rem 1fr 2rem 0',
  'sm-layout': '0 0 1fr 0 0'
},

If we want to insert a new line down the centre of the page - we'll have to update col-end and col-start classes on existing content:

gridTemplateColumns: {
  'layout': '1fr 2rem calc(384px - 2rem) calc(384px - 2rem) 2rem 1fr',
  'md-layout': '0 2rem 1fr 1fr 2rem 0',
  'sm-layout': '0 0 1fr 1fr 0 0'
},

Also, layouts like 0 1rem 1fr 1rem 0 add unnecessary zero-width columns just so that we don't have to add responsive col-end and col-start classes.

With named lines, we could do something like this:

gridTemplateColumns: {
  'layout': '1fr [gutter-left] 2rem [content-left] calc(384px - 2rem) [center] calc(384px - 2rem) [content-right] 2rem [gutter-right] 1fr',
  'md-layout': '[gutter-left] 2rem [content-left] 1fr [content-right] 2rem [gutter-right]',
  'sm-layout': '[gutter-left content-left] 100% [content-right gutter-right]'
},

In the HTML we can have classes like col-start-gutter-left or col-end-content-right, providing more flexibility to introduce new lines or move the lines for responsive layouts. Obviously, we'll need to do something like col-start-center md:col-start-content-right in some places, but this would be less burdensome than col-start-4 md:col-start-3 - and more readable, too.

An additional consideration for grid is that line names do not have to be unique:

.container {
  grid-template-columns: 20px [offset] 20px [offset] 20px [offset];
}

In this case the lines are numerically indexed (offset-1, etc). The class would look like col-start-offset-1 or col-end-offset-2.

In terms of generating the utilities - grid-template-columns and grid-template-rows would be simply copies of the strings just as they are now. Creating the named line utilities would need the string to be parsed for names, and indexes added to repeated names.

[horuskol]

PR #2307

[horuskol]

I've released a package on npm which provides the plugin:

https://github.com/SavvyWombat/tailwindcss-grid-named-lines