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
Requires Setup
plugin with theme.innerGutters
and
theme.columnCount
configured.
Output
Demo
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:
Compatibility with Layout
plugin
As both plugins use the same set of :root
variables, they can
be nested inside of each other:
Responsive
A full set of responsive classes are generated:
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.