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

[thompsonmanda08]

This right here just saved me a lot of work. Appreciation all the way!

[Mohit-au50]

100px is a static value so if we need to specify some other value then 100px is it possible if yes then can we use arbitrary value like other properties in tailwind ex. auto-fit-[12rem] or auto-fill-[12rem]?

[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', {}),
        }
      )
    })]

[Mohit-au50]

@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?