GridLine

Description

A series of classes to draw grid strokes inside the gutters of a grid. This is specifically intended to be used with Tailwind's grid classes and assumes your column gutters gutters are --inner-gutter in size set with gap-x-gutter from the GridGap plugin.

The classes automatically account for first row, first of row, last row and last of row to only draw the internal grid lines and have no undesired lines outside of the grid of items. They will do this for any amount of columns at any breakpoint.

The classes support up to the maximum amount of columns at each breakpoint; so if your breakpoint has 12 design columns, you could have functioning grid lines up to 12 columns. If you need more, you can specify more with a maxGridCols object in your config.

You can mix item width, item height, row and column classes and control the color of the horizontal and vertical strokes independently.

• grid-line-x - draws grid lines above each child, each is the width of the child, except the first row
• grid-line-xfull - essentially draws row lines
• grid-line-y - draws grid lines to the left of each child, each is the height of the child, except the first column
• grid-line-yfull - essentially draws column lines
• grid-line-x-primary - makes the horizontal grid lines the primary border color
• grid-line-y-primary - makes the vertical grid lines the primary border color
• grid-line-xy-primary - makes both the horizontal and vertical grid lines the primary border color
• grid-line-x-0 - hides the horizontal grid lines, especially useful when making responsive/adaptive grids
• grid-line-y-0 - hides the vertical grid lines, especially useful when making responsive/adaptive grids

The GridLine classes assume your grid gutters are equal to --inner-gutter, which we would set using GridGap - grid-gap-gutter. If you have taller row gaps, you need to set some GridLine classes to shift the lines it draws:

• For gap-y-48 (standard Tailwind class) you would set grid-line-x-24 - to position the drawn line in the middle of the 48 gap. Of course you could set it higher or lower by changing the -24

The gridline classes also have responsive states using Tailwind responsive prefixes, eg:

• md:grid-line-x-primary - switches primary border color horizontal grid lines at md breakpoint
• lg:grid-line-y-0 - removes the vertical grid lines at lg breakpoint

NB: there is nothing stopping you using these classes with a flex layout, its just more complex to set up grids like this with flex.

Setup

const { Setup, GridGap, GridLine } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Setup, GridGap, GridLine],
  theme: {
    innerGutters: {
      xs: "10px",
      sm: "15px",
      md: "20px",
      lg: "30px",
      xl: "40px",
      xxl: "40px"
    },
    borderColor: {
      "primary": "#757575",
      "secondary": "#f00",
      "tertiary": "#d9d9d9"
    }
  }
  ...
};

Requires Setup plugin with theme.innerGutters and theme.borderColor configured and also the GridGap plugin.

You will 100% want to make sure your CSS is purged when using this plugin - as this plugin can create a lot of CSS to cover all the variations.

Demo

Row grid lines, grid-line-x grid-line-x-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-x grid-line-x-primary">

Full width row gridlines, grid-line-x grid-line-x-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-xfull grid-line-x-primary">

Column gridlines, grid-line-y grid-line-y-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-y grid-line-y-primary">

Full height column gridlines, grid-line-yfull grid-line-y-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-yfull grid-line-y-primary">

Combining row and column grid lines

grid-line-x grid-line-y grid-line-xy-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-x grid-line-y grid-line-xy-primary">

Setting full width and full height grid lines, grid-line-xfull grid-line-yfull grid-line-xy-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-xfull grid-line-yfull grid-line-xy-primary">

Full width row gridlines and item height column gridlines, grid-line-xfull grid-line-y grid-line-xy-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-xfull grid-line-y grid-line-xy-primary">

Item width row gridlines and full height column gridlines, grid-line-x grid-line-yfull grid-line-xy-primary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-x grid-line-yfull grid-line-xy-primary">

Taller row gaps

Maybe you require taller row gaps in comparison with our column gaps, gap-y-80 grid-line-x-40:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-gutter gap-y-80 grid-line-x grid-line-x-40 grid-line-yfull grid-line-xy-primary">

Changing the colours of the gridlines

You set the colour of the gridlines with:

• grid-line-xy-COLORNAME

And you can set the grid line colours for each axis with:

• grid-line-x-COLORNAME
• grid-line-y-COLORNAME

Where the colour name is any of your theme border colours.

So, to make gridlines the secondary border colour, use grid-line-xy-secondary, to give grid-line-x grid-line-y grid-line-xy-secondary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-x  grid-line-y grid-line-xy-secondary">

And to make secondary border colour row grid lines grid-line-x-secondary and tertiary border colour column grid lines grid-line-y-tertiary - to give grid-line-x grid-line-x-secondary grid-line-y grid-line-y-tertiary:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-x grid-line-x-secondary grid-line-y grid-line-y-tertiary">

Responsive

The following example is an overly complex arrangement, where we start with a 2 column grid and full width row grid lines. At md those row grid lines change colour and item height column grid lines appear. At lg the row grid lines hide and the column grid lines change colour. And then finally, at xxl the row grid lines return:

<div class="
  grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4
  gap-x-gutter
  gap-y-48 md:gap-y-64 grid-line-x-24 md:grid-line-x-32 xl:grid-line-x-32
  grid-line-xfull grid-line-x-primary
  grid-line-y-0 md:grid-line-y md:grid-line-y-primary md:grid-line-x-tertiary
  lg:grid-line-y-secondary lg:grid-line-x-0
  xl:grid-line-x xl:grid-line-x-primary">

It is doubtful that you'll ever need anything so complex and in all honesty, it is possible to make combinations that don't work as expected. If you saw the CSS you'd understand why - we really need a native way of doing this in CSS. One "trick" used to make the above work was to set grid-line-y-0 and then override it at md with md:grid-line-y