How to use CSS Grid auto-fill and auto-fit with Tailwind CSS?

[martinszeltins]

How would I do this using Tailwind if I wanted to write CSS like this?

For example, using auto-fill:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

or using auto-fit:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

[simonswiss]

Hey @martinszeltins 👋

Two ways you can do this:

1. Extend the gridTemplateColumns object in your Tailwind config

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'auto-fill-100': 'repeat(auto-fill, minmax(100px, 1fr))',
        'auto-fit-100': 'repeat(auto-fit, minmax(100px, 1fr))',
      },
    },
  },
}

This will create a grid-cols-auto-fill-100 and grid-cols-auto-fit-100 (but feel free to name them differently in the config!) 👍

---

2. Inline the grid-template-column definition in a JIT arbitrary value

The grid-cols-* utilities accept arbitrary values when JIT mode it turned on. That means you can do things like this:

grid-cols-[repeat(auto-fill,minmax(100px,1fr))]

Notice the absence of spaces in that class – you cannot have spaces in a class! Fear not, the spaces will be added back in the generated CSS from that class!

Here's a Tailwind Play showing both implementations (check both the config file and the HTML):

https://play.tailwindcss.com/gUosL2mfZ1?file=config

Hope it helps!

auto-fill.and.fit.mov

[Janaka-Steph]

In Tailwind.config.js

  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'auto-fill': (value) => ({
            gridTemplateColumns: `repeat(auto-fill, minmax(min(${value}, 100%), 1fr))`,
          }),
          'auto-fit': (value) => ({
            gridTemplateColumns: `repeat(auto-fit, minmax(min(${value}, 100%), 1fr))`,
          }),
        },
        {
          values: theme('width', {}),
        }
      )
    })]

[mohit2404]

@Janaka-Steph thank you for the solution

[thompsonmanda08]

@Janaka-Steph, sorry for the bother, Just at the bottom, do you mind explaining the object with the "value" key?

[MarcosVini9999]

utils: for typescript you need to import plugin from "tailwindcss/plugin";

😀

[mohit2404]

@thompsonmanda08 the second object is the options objects, here we are setting the values option to width which is defined in tailwindcss config. theme(width, {}) is use to get the values od width defind in tailwind config, if no values are found then it defaults to an empty object

[mayurwankhade96]

just use grid-cols-[repeat(auto-fit,_minmax(400px,_1fr))] this exact thing, adjust according to your needs

[Nusab19]

As @mayurwankhade96 said, just use

grid-cols-[repeat(auto-fit,minmax(13rem,1fr))]

And change the 13rem to your need.

But keep in mind that, by using this, you can't use items-center or justify-center to center the div anymore.

You need to use place-items-center to center the div instead.

I've never used place-items-center before, but somehow it worked.
And "Don't touch it if it works!"