[Feature Request] Revisit "CSS Grid Auto-Fill/Auto-Fit" Since JIT Compiler Released (Issue #1403)

[jvanderen1]

Feel free to close this issue if it really is something we will not reconsider doing for TailwindCSS 🙏🏻 . I figured it would be worth one last push for #1403 since the new JIT compiler has been released.

Example Syntax

@Yoda-Soda gave a great suggestion for sensible values for auto-fill and auto-fit. Although I have mainly seen these property values used for grid-template-columns, it may be better to specify separate classes for grid-template-rows and grid-template-columns :

Class	Value
grid-rows-fill-16	grid-template-rows: repeat(auto-fill, minmax(4rem, 1fr))
grid-cols-fill-20	grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr))
grid-rows-fit-24	grid-template-rows: repeat(auto-fit, minmax(6rem, 1fr))
grid-cols-fit-28	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr))

Thanks for developing such a wonderful tool! I advocate for it at work all the time ⭐ .

[frei-x]

very good

[Yoda-Soda]

@jvanderen1 that looks perfect 🥹. May the powers that be add this to tailwind 🙏

[jerearaujo03]

+1 It's a must for layout with grid

[guilhermeg2k]

+1, I also would love that feature as strong grid auto-fill user

[jvanderen1]

I put together a pull request for this feature #8812 🤞🏻

[jvanderen1]

Looks like my PR was closed today. However, I'll be look into making a plugin 👍🏻.

[Omar-Elmassry]

if you ever got to making this a plugin please let us know, I am very interested to try it out.

[phegman]

This works for me. Modify as needed 🙂

extend: {
  gridTemplateColumns: (theme) => {
    const spacing = theme("spacing");

    return Object.keys(spacing).reduce((accumulator, spacingKey) => {
      return {
        ...accumulator,
        [`fill-${spacingKey}`]: `repeat(auto-fill, minmax(${spacing[spacingKey]}, 1fr))`,
      };
    }, {});
  },
},

[Yoda-Soda]

This works for me. Modify as needed 🙂

extend: {

  gridTemplateColumns: (theme) => {

    const spacing = theme("spacing");



    return Object.keys(spacing).reduce((accumulator, spacingKey) => {

      return {

        ...accumulator,

        [`fill-${spacingKey}`]: `repeat(auto-fill, minmax(${spacing[spacingKey]}, 1fr))`,

      };

    }, {});

  },

},

This is gold great idea.

[BrennerSpear]

i tried doing this but it seems to not pick up my fill-28.

is there something I'm doing wrong here?

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            gridTemplateColumns: (theme) => {
                const spacing = theme('spacing')
                console.log('spacing', spacing)
                return Object.keys(spacing).reduce(
                    (accumulator, spacingKey) => {
                        return {
                            ...accumulator,
                            [`fill-${spacingKey}`]: `repeat(auto-fill, minmax(${spacing[spacingKey]}, 1fr))`,
                        }
                    },
                    {},
                )
            },
...

[Debbl]

if you use tailwindcss v4, maybe you can try this

@import 'tailwindcss';

@utility grid-cols-fill-* {
  grid-template-columns: repeat(auto-fill, minmax(--spacing(--value(number)), 1fr));
}

@utility grid-cols-fit-* {
  grid-template-columns: repeat(auto-fit, minmax(--spacing(--value(number)), 1fr));
}