Named Grid Lines for Tailwind CSS

Usage

Require the plugin in your tailwindcss.config.js file:

// tailwindcss.config.js
module.exports = {
  plugins: [
    require('@savvywombat/tailwindcss-grid-named-lines')
  ]
}

Now, when adding gridTemplateColumns and gridTemplateRows, you can name the lines between your grid cells and suitable utilities will be generated:

// tailwindcss.config.js
module.exports = {
  theme: {
    extends: {
      gridTemplateColumns: {
        'default-layout': '[left] 1fr [gutter-left] 2rem [content-left] calc(768px - 4rem) [content-right] 2rem [gutter-right] 1fr [right]',
      },
      gridTemplateRows: {
        'default-layout':
          '[top header-top] ' +
          '4rem [header-bottom content-top] ' +
          'minmax(auto, 1fr) [content-bottom footer-top] ' +
          'auto [bottom]',
      },
    },
  },
  plugins: [
    require('@savvywombat/tailwindcss-grid-named-lines')
  ]
}

The above configuration will generate the following utilities (in addition to the default grid utilities):

col-start-left
col-start-gutter-left
col-start-content-left
col-start-content-right
col-start-gutter-right
col-start-right

col-end-left
col-end-gutter-left
col-end-content-left
col-end-content-right
col-end-gutter-right
col-end-right

row-start-top
row-start-header-top
row-start-header-bottom
row-start-content-top
row-start-content-bottom
row-start-footer-top
row-start-footer-bottom
row-start-bottom

row-end-top
row-end-header-top
row-end-header-bottom
row-end-content-top
row-end-content-bottom
row-end-footer-top
row-end-footer-bottom
row-end-bottom

Responsiveness

These utilities do not have any responsive behaviour by themselves. However, responsive grid layouts can be achieved using multiple gridTemplateColumns and/or gridTemplateRows definitions which reuse the same line names.

For this example, we will define a single breakpoint for screens that are smaller than 768 pixels wide.

// tailwindcss.config.js
module.exports = {
  screens: {
    'sm': {'max': '768px'},
  },
  theme: {
    extends: {
      gridTemplateColumns: {
        'default-layout': '[left] 1fr [gutter-left] 2rem [content-left] calc(768px - 4rem) [content-right] 2rem [gutter-right] 1fr [right]',
        'small-layout': '[left gutter-left] 1rem [content-left] 1fr [content-right] 1rem [gutter-right right]',
      },
    },
  },
}

<div class="grid grid-flow-row grid-default-layout sm:small-layout">
    <header class="col-start-gutter-left col-end-gutter-right"></header>
    <main class="col-start-content-left col-end-content-right"></main>
</div>

On screens wider than 768 pixels, the main content will be a fixed width, the header will be slightly wider, and the margins/gutters to the left and right will resize to center the content and header.

On smaller screens, the margins will disappear, and the gutters will shrink.

Repeated line names

This plugin will generate numbered utilities when multiple lines share the same name in a gridTemplateColumns or gridTemplateRows definition:

// tailwindcss.config.js
module.exports = {
  theme: {
    extends: {
      gridTemplateColumns: {
        'default-layout': '[column-start] 1fr [column-start] 1fr [column-start] 1fr [column-start] 1fr',
      },
    },
  },
}

col-start-column-start-1
col-start-column-start-2
col-start-column-start-3
col-start-column-start-4

col-end-column-start-1
col-end-column-start-2
col-end-column-start-3
col-end-column-start-4

Additionally, the plugin will create properly indexed utilities for line names defined inside repeat():

// tailwindcss.config.js
module.exports = {
  theme: {
    extends: {
      gridTemplateColumns: {
        'default-layout': 'repeat(3, [left] 1fr [right])',
      },
    },
  },
}

col-start-left-1
col-start-left-2
col-start-left-3

col-start-right-1
col-start-right-2
col-start-right-3

col-end-left-1
col-end-left-2
col-end-left-3

col-end-right-1
col-end-right-2
col-end-right-3