@goldencomm/tailwind-plugin-grid

⚠️ For Tailwind v3 support, use v1 of this package.

Installation

Install the plugin from npm:

npm i -D @goldencomm/tailwind-plugin-grid

Then import the styles in your CSS file:

@import "@goldencomm/tailwind-plugin-grid";

Usage

Use the grid-cols-fill-* or grid-cols-fit-* utilities on a grid container.

<div class="grid grid-cols-fill-96 gap-5">
  <div class="aspect-square bg-red-500"></div>
  <div class="aspect-square bg-red-500"></div>
  <div class="aspect-square bg-red-500"></div>
</div>

* will be interpreted the same as Tailwind's --spacing() function. Arbitrary values are also supported (i.e., grid-cols-fill-[10rem]).

Like other Tailwind modifiers, you can use any of Tailwind's available state, breakpoint, or other media query modifiers.

The difference between auto-fill and auto-fit

If there are not enough grid items to fill the available tracks, grid-cols-fit-* collapses those tracks and expands the grid items to fill the available space.

If there are not enough grid items to fill the available tracks, grid-cols-fill-* preserves that space and the layout remains the same whether there are enough grid items or not.