@goldencomm/tailwind-plugin-grid

Installation

Install the plugin from npm:

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

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

module.exports = {
  theme: {
    // ..
  },
  plugins: [require("@goldencomm/tailwind-plugin-grid")],
};

Usage

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

<div class="grid auto-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>

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, auto-fit collapses those tracks and expands the grid items to fill that space.

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

Customizing your theme

By default, available values are the same as Tailwind's default spacing values.

| Class | Properties | | --------------- | ------------------------------------------------- | | auto-fill-0 | repeat(auto-fill, minmax(0, 100%), 1fr)) | | auto-fill-px | repeat(auto-fill, minmax(1px, 100%), 1fr)) | | auto-fill-0.5 | repeat(auto-fill, minmax(0.125rem, 100%), 1fr)) | | auto-fill-1 | repeat(auto-fill, minmax(0.25rem, 100%), 1fr)) | | auto-fill-1.5 | repeat(auto-fill, minmax(0.375rem, 100%), 1fr)) | | auto-fill-2 | repeat(auto-fill, minmax(0.5rem, 100%), 1fr)) | | auto-fill-2.5 | repeat(auto-fill, minmax(0.625rem, 100%), 1fr)) | | auto-fill-3 | repeat(auto-fill, minmax(0.75rem, 100%), 1fr)) | | auto-fill-3.5 | repeat(auto-fill, minmax(0.875rem, 100%), 1fr)) | | auto-fill-4 | repeat(auto-fill, minmax(1rem, 100%), 1fr)) | | auto-fill-5 | repeat(auto-fill, minmax(1.25rem, 100%), 1fr)) | | auto-fill-6 | repeat(auto-fill, minmax(1.5rem, 100%), 1fr)) | | auto-fill-7 | repeat(auto-fill, minmax(1.75rem, 100%), 1fr)) | | auto-fill-8 | repeat(auto-fill, minmax(2rem, 100%), 1fr)) | | auto-fill-9 | repeat(auto-fill, minmax(2.25rem, 100%), 1fr)) | | auto-fill-10 | repeat(auto-fill, minmax(2.5rem, 100%), 1fr)) | | auto-fill-11 | repeat(auto-fill, minmax(2.75rem, 100%), 1fr)) | | auto-fill-12 | repeat(auto-fill, minmax(3rem, 100%), 1fr)) | | auto-fill-14 | repeat(auto-fill, minmax(3.5rem, 100%), 1fr)) | | auto-fill-16 | repeat(auto-fill, minmax(4rem, 100%), 1fr)) | | auto-fill-20 | repeat(auto-fill, minmax(5rem, 100%), 1fr)) | | auto-fill-24 | repeat(auto-fill, minmax(6rem, 100%), 1fr)) | | auto-fill-28 | repeat(auto-fill, minmax(7rem, 100%), 1fr)) | | auto-fill-32 | repeat(auto-fill, minmax(8rem, 100%), 1fr)) | | auto-fill-36 | repeat(auto-fill, minmax(9rem, 100%), 1fr)) | | auto-fill-40 | repeat(auto-fill, minmax(10rem, 100%), 1fr)) | | auto-fill-44 | repeat(auto-fill, minmax(11rem, 100%), 1fr)) | | auto-fill-48 | repeat(auto-fill, minmax(12rem, 100%), 1fr)) | | auto-fill-52 | repeat(auto-fill, minmax(13rem, 100%), 1fr)) | | auto-fill-56 | repeat(auto-fill, minmax(14rem, 100%), 1fr)) | | auto-fill-60 | repeat(auto-fill, minmax(15rem, 100%), 1fr)) | | auto-fill-64 | repeat(auto-fill, minmax(16rem, 100%), 1fr)) | | auto-fill-72 | repeat(auto-fill, minmax(18rem, 100%), 1fr)) | | auto-fill-80 | repeat(auto-fill, minmax(20rem, 100%), 1fr)) | | auto-fill-96 | repeat(auto-fill, minmax(24rem, 100%), 1fr)) | | auto-fit-0 | repeat(auto-fit, minmax(0, 100%), 1fr)) | | auto-fit-px | repeat(auto-fit, minmax(1px, 100%), 1fr)) | | auto-fit-0.5 | repeat(auto-fit, minmax(0.125rem, 100%), 1fr)) | | auto-fit-1 | repeat(auto-fit, minmax(0.25rem, 100%), 1fr)) | | auto-fit-1.5 | repeat(auto-fit, minmax(0.375rem, 100%), 1fr)) | | auto-fit-2 | repeat(auto-fit, minmax(0.5rem, 100%), 1fr)) | | auto-fit-2.5 | repeat(auto-fit, minmax(0.625rem, 100%), 1fr)) | | auto-fit-3 | repeat(auto-fit, minmax(0.75rem, 100%), 1fr)) | | auto-fit-3.5 | repeat(auto-fit, minmax(0.875rem, 100%), 1fr)) | | auto-fit-4 | repeat(auto-fit, minmax(1rem, 100%), 1fr)) | | auto-fit-5 | repeat(auto-fit, minmax(1.25rem, 100%), 1fr)) | | auto-fit-6 | repeat(auto-fit, minmax(1.5rem, 100%), 1fr)) | | auto-fit-7 | repeat(auto-fit, minmax(1.75rem, 100%), 1fr)) | | auto-fit-8 | repeat(auto-fit, minmax(2rem, 100%), 1fr)) | | auto-fit-9 | repeat(auto-fit, minmax(2.25rem, 100%), 1fr)) | | auto-fit-10 | repeat(auto-fit, minmax(2.5rem, 100%), 1fr)) | | auto-fit-11 | repeat(auto-fit, minmax(2.75rem, 100%), 1fr)) | | auto-fit-12 | repeat(auto-fit, minmax(3rem, 100%), 1fr)) | | auto-fit-14 | repeat(auto-fit, minmax(3.5rem, 100%), 1fr)) | | auto-fit-16 | repeat(auto-fit, minmax(4rem, 100%), 1fr)) | | auto-fit-20 | repeat(auto-fit, minmax(5rem, 100%), 1fr)) | | auto-fit-24 | repeat(auto-fit, minmax(6rem, 100%), 1fr)) | | auto-fit-28 | repeat(auto-fit, minmax(7rem, 100%), 1fr)) | | auto-fit-32 | repeat(auto-fit, minmax(8rem, 100%), 1fr)) | | auto-fit-36 | repeat(auto-fit, minmax(9rem, 100%), 1fr)) | | auto-fit-40 | repeat(auto-fit, minmax(10rem, 100%), 1fr)) | | auto-fit-44 | repeat(auto-fit, minmax(11rem, 100%), 1fr)) | | auto-fit-48 | repeat(auto-fit, minmax(12rem, 100%), 1fr)) | | auto-fit-52 | repeat(auto-fit, minmax(13rem, 100%), 1fr)) | | auto-fit-56 | repeat(auto-fit, minmax(14rem, 100%), 1fr)) | | auto-fit-60 | repeat(auto-fit, minmax(15rem, 100%), 1fr)) | | auto-fit-64 | repeat(auto-fit, minmax(16rem, 100%), 1fr)) | | auto-fit-72 | repeat(auto-fit, minmax(18rem, 100%), 1fr)) | | auto-fit-80 | repeat(auto-fit, minmax(20rem, 100%), 1fr)) | | auto-fit-96 | repeat(auto-fit, minmax(24rem, 100%), 1fr)) |

You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      spacing: {
        128: "32rem",
      },
    },
  },
};

To customize auto-fill or auto-width separately, use the theme.autoFill or theme.autoFit section of your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      autoFill: {
        128: "32rem",
      },
    },
  },
};