SavvyWombat

Named Grid Lines for Tailwind CSS

A plugin to provide Tailwind CSS utilities for named grid lines.

# npm
npm install --save-dev @savvywombat/tailwindcss-grid-named-lines

# yarn
yarn add --dev @savvywombat/tailwindcss-grid-named-lines
GitHub npm

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: {
    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(1fr, max-content) ' +
        '[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: {
    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 the left and right will resize to center the content and header.

width > 768px
width = 100% - 2fr
width = 100% - (2fr + 4rem)

On smaller screens, the margins/gutters will completely disappear, and the main content will resize to fit the screen.

width < 768px
width = 100%
width = 100% - 2rem

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: {
    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: {
    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