GridLayout

Description

This plugin creates classes to handle CSS grid layouts:

  • .grid-layout - on parent, makes css grid layout with columns set to equal the amount of design columns at each breakpoint and with the grid gap set to the inner gutter
  • .grid-col-span-N - on child, sets width N grid columns wide
  • .grid-col-start-N - on child, starts element on the Nth grid column
  • .grid-col-end-N - on child, ends element on the Nth grid column

Why use this over Tailwind's native grid column classes?

By default, Tailwind assumes you have a 12 grid layout at all your breakpoints - this plugin does not. This plugin uses your Tailwind config, specifically the Setup theme.columnCount to adjust the amount of columns at each breakpoint so if your md breakpoint has 8 design columns, you can easily span 6 of them without having to convert from 12. This plugin also allows nesting whilst keeping to your overall amount of design columns.

Setup

tailwind.config.js
const { Setup, GridLayout } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Setup, GridLayout],
  theme: {
    innerGutters: {
      xs: "10px",
      sm: "15px",
      md: "20px",
      lg: "30px",
      xl: "40px",
      xxl: "40px"
    },
    columnCount: {
      xs: 4,
      sm: 4,
      md: 8,
      lg: 12,
      xl: 12
    }
  }
  ...
};

Requires Setup plugin with theme.innerGutters and theme.columnCount configured.

Output

app.css
.grid-layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-gap: var(--inner-gutter);
}

.grid-col-span-1 {
  --grid-columns: 1;
  grid-column: span 1 / span 1;
}

.grid-col-start-1 {
  grid-column-start: 1;
}

.grid-col-end-1 {
  grid-column-end: 1;
}

...

.grid-col-span-MAXCOLS {
  --grid-columns: MAXCOLS;
  grid-column: span MAXCOLS / span MAXCOLS;
}

.grid-col-start-MAXCOLS {
  grid-column-start: 1;
}

.grid-col-end-MAXCOLS {
  grid-column: MAXCOLS;
}

Demo

document.html
<div class="grid-layout">
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
  <div class="grid-col-span-1"></div>
</div>

Nesting

If you use grid-col-span-N classes for your grid column spanning, then any nested grid-layout, or w-N-cols classes will key off the design grid at each breakpoint:

document.html
<div class="grid-layout mt-40">
  <div class="grid-col-span-2"></div>
  <div class="grid-col-span-8 grid-layout">
    <div class="grid-col-span-6 grid-layout">
      <div class="grid-col-span-2"></div>
      <div class="grid-col-span-2"></div>
    </div>
    <div class="grid-col-span-1"></div>
  </div>
</div>

Compatibility with Layout plugin

As both plugins use the same set of :root variables, they can be nested inside of each other:

w-5-cols inside grid-col-span-9
document.html
<div class="grid-layout">
  <div class="grid-col-span-9">
    <div class="w-5-cols"></div>
  </div>
</div>

Responsive

A full set of responsive classes are generated:

grid-span-2 md:grid-span-2 lg:grid-span-4
grid-span-1 md:grid-span-4 lg:grid-span-6
document.html
<div class="cols-grid mt-40">
  <div class="grid-span-2 md:grid-span-2 lg:grid-span-4 h-40 bg-column">grid-span-2 md:grid-span-2 lg:grid-span-4</div>
  <div class="grid-span-1 md:grid-span-4 lg:grid-span-6 h-40 bg-column">grid-span-1 md:grid-span-4 lg:grid-span-6</div>
</div>

Mixing and matching with Tailwind grid classes:

For full and complete grid layouts, you will want use Tailwind native classes such as row-span-* (Row spanning on Tailwind). This plugin doesn't re-create or usurp all Tailwind grid classes, just provides extra classes to work with your design grid.

document.html
<div class="grid-layout mt-40">
  <div class="grid-col-span-6 grid-col-start-4 row-span-full bg-column"></div>
  <div class="grid-col-span-3 grid-col-start-1 row-span-3 bg-column"></div>
  <div class="grid-col-span-3 grid-col-end-13 row-end-3 h-40 bg-column"></div>
</div>