GridGap

Description

This plugin creates classes to handle responsive grid gutters:

  • .gap-gutter
  • .gap-y-gutter
  • .gap-x-gutter

Which are responsive CSS grid gutters to complement Tailwind's grid-gap.

Setup

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

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

Requires Setup plugin with theme.innerGutters configured.

Demo

Mixing in with standard Tailwind grid type classes, we use gap-x-gutter to set the grid's column gutter:

document.html
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-20  gap-x-gutter">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Much like Tailwind's grid-gap, you can prefix these classes per breakpoint, state etc.

document.html
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-20 gap-x-0 md:gap-x-gutter lg:gap-x-0 xl:gap-x-gutter">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>