@trandx/tailwind-auto-grid NPM

Tailwind CSS Grid Auto Fit Plugin

This Tailwind CSS plugin provides utilities to create responsive grid layouts using auto-fit with custom sizing from the theme's spacing scale. It also allows for arbitrary values to be used for the minmax function.

Capture

Installation

    pnpm add -D @trandx/tailwind-auto-grid

    npm i -D @trandx/tailwind-auto-grid

Configuration

To enable the plugin, add it to your tailwind.config.js:

import type { Config } from 'tailwindcss/types';

import autoGridPlugin from '@trandx/tailwind-auto-grid';

// Export the full Tailwind configuration
const tailwindConfig: Config = {
  content: [],
    theme: {
        extend: {
        // Your theme customizations
        },
    },
    plugins: [
        // Your plugin
        autoGridPlugin,
    ],
};

export default tailwindConfig;

// tailwind.config.js
const autoGridPlugin = require('@trandx/tailwind-auto-grid');

module.exports = {
  theme: {
    extend: {
      // Your theme customizations
    },
  },
  plugins: [
    autoGridPlugin,
  ],
};

Usage

use arbitrary values with the .grid-auto-fit utility classes to create responsive grids:

<div class="grid grid-auto-fit-xs gap-4">
    <div class="bg-gray-200">Item 1</div>
    <div class="bg-gray-200">Item 2</div>
    <div class="bg-gray-200">Item 3</div>
</div>

Alternatively, use arbitrary values with the .grid-auto-fill utility:

<div class="grid grid-auto-fill-[10rem] gap-4">
    <div class="bg-gray-200">Item 1</div>
    <div class="bg-gray-200">Item 2</div>
    <div class="bg-gray-200">Item 3</div>
</div>

Changing the grid item size

Use utilities like .grid-auto-fit-sm, .grid-auto-fit-xl or .grid-auto-fill-sm, .grid-auto-fill-xl to change the minimum and maximum item size of the responsive grid. This plugin includes five item sizes with the default minimum size being 16rem and can take custom value in px, rem, etc...

Class	Minimum item width
`grid-auto-fill-xs` or `grid-auto-fit-xs`	`6rem`
`grid-auto-fill` or `grid-auto-fit`	`8rem`
`grid-auto-fill-sm` or `grid-auto-fit-sm`	`10rem`
`grid-auto-fill-md` or `grid-auto-fill-md`	`14rem`
`grid-auto-fill-lg` or `grid-auto-fit-lg`	`18rem`
`grid-auto-fill-xl` or `grid-auto-fit-xl`	`22rem`
`grid-auto-fill-[250px]` or `grid-auto-fit-[250px]`	`250px`