Grid Auto Fit for Tailwind CSS

A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-fit keyword in the grid-template-columns CSS property to help you do the same.

Installation

Install it in a new or existing Tailwind CSS project

npm install -D @shrutibalasa/tailwind-grid-auto-fit

Then add the plugin to your tailwind.config.js file:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@shrutibalasa/tailwind-grid-auto-fit'),
    // ...
  ],
}

Basic usage

Use the class grid-auto-fit along with grid class to create a responsive grid layout.

<section class="grid gap-4 grid-auto-fit">
   <div class="p-4 bg-blue-100 rounded-md">
      Item 1
   </div>
   <div class="p-4 bg-blue-100 rounded-md">
      Item 2
   </div>
   <div class="p-4 bg-blue-100 rounded-md">
      Item 3
   </div>
   <div class="p-4 bg-blue-100 rounded-md">
      Item 4
   </div>
   <div class="p-4 bg-blue-100 rounded-md">
      Item 5
   </div>
   <div class="p-4 bg-blue-100 rounded-md">
      Item 6
   </div>
   <div class="p-4 bg-blue-100 rounded-md">
      Item 7
   </div>
</section>

Changing the grid item size

Use utilities like .grid-auto-fit-sm, .grid-auto-fit-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.

| Class | Minimum item width | | ------------------------------------- | ------------------ | | grid-auto-fit-xs | 12rem | | grid-auto-fit-sm | 14rem | | grid-auto-fit or grid-auto-fit-md | 16rem | | grid-auto-fit-lg | 18rem | | grid-auto-fit-xl | 20rem |

Arbitrary values

This plugin supports the use of arbitrary values if you want a custom minimum item size

<section class="grid grid-auto-fit-[13rem]">
   ...
</section>