open-index/open-npm huggingface dataset:
npm package: @goldencomm/tailwind-plugin-grid
Description: ⚠️ For Tailwind v3 support, use v1 of this package.
Latest version: 2.0.0

# @goldencomm/tailwind-plugin-grid

⚠️ For Tailwind v3 support, use v1 of this package.

## Installation

Install the plugin from npm:

```bash
npm i -D @goldencomm/tailwind-plugin-grid
```

Then import the styles in your CSS file:

```css
@import "@goldencomm/tailwind-plugin-grid";
```

## Usage

Use the `grid-cols-fill-*` or `grid-cols-fit-*` utilities on a grid container.

```html
<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.