Extra grid utilities for Tailwind CSS

Features

• grid-auto-fit utility
• grid-auto-fill utility

Installation

npm install -D tailwind-grid-extras

For Tailwind CSS v4: add the plugin to your main css file:

  @import "tailwindcss";
+ @plugin "tailwind-grid-extras";

For Tailwind CSS v3: add the plugin to your tailwind config file:

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      // ...
    },
    plugins: [
+     require('tailwind-grid-extras'),
      // ...
    ],
  }

Basic usage

grid-auto-fit

<section class="grid gap-4 grid-auto-fit">
    <!-- ... -->
</section>

| Class | Properties | | --------------------------------------- | -------------------------------------- | | grid-auto-fit-xs | repeat(auto-fit, minmax(12rem, 1fr)) | | grid-auto-fit-sm | repeat(auto-fit, minmax(14rem, 1fr)) | | grid-auto-fit grid-auto-fit-md | repeat(auto-fit, minmax(16rem, 1fr)) | | grid-auto-fit-lg | repeat(auto-fit, minmax(18rem, 1fr)) | | grid-auto-fit-xl | repeat(auto-fit, minmax(20rem, 1fr)) |

You can customize gridAutoFit theme config key to add custom values or modify default ones.

You can also use arbitrary values: grid-auto-fit-[13rem]

grid-auto-fill

<section class="grid gap-4 grid-auto-fit">
    <!-- ... -->
</section>

| Class | Properties | | ----------------------------------------- | --------------------------------------- | | grid-auto-fill-xs | repeat(auto-fill, minmax(12rem, 1fr)) | | grid-auto-fill-sm | repeat(auto-fill, minmax(14rem, 1fr)) | | grid-auto-fill grid-auto-fill-md | repeat(auto-fill, minmax(16rem, 1fr)) | | grid-auto-fill-lg | repeat(auto-fill, minmax(18rem, 1fr)) | | grid-auto-fill-xl | repeat(auto-fill, minmax(20rem, 1fr)) |

You can customize gridAutoFill theme config key to add custom values or modify default ones.

You can also use arbitrary values: grid-auto-fill-[13rem]