[Feature request] CSS Grid - Auto-Fit & Auto-Fill

[rexdesigndk]

So happy that Tailwind finally have css grid support built-in 👍
The only thing i've been missing, when working with tailwinds grid utilities are Auto-Fit & Auto-Fill
Any plans to add them in the future?

[tlgreg]

The keywords can be used in the config eg in gridTemplateColumns.

module.exports = {
  theme: {
    gridTemplateColumns: {
      'fill-40': 'repeat(auto-fill, 10rem)',
    },
  },
}

https://tailwindcss.com/docs/grid-template-columns#customizing

Just a little notice, there is a bug currently in Firefox with auto-fit and auto-fill:
https://bugzilla.mozilla.org/show_bug.cgi?id=1341507

[adamwathan]

Thanks glad you are digging the grid support! Like @tlgreg mentioned you can add this in your config if you need it, think we'll keep it out of core for now as I'm not sure there are any real sensible defaults we could include.

[anthonylebrun]

I think this feature request might be worth revisiting with the new JIT compiler ^ :)

[jvanderen1]

@adamwathan Is this something on the teams radar? 👀

[Yoda-Soda]

A revisit would be great. I am a heavy user of grid and no auto-fit and auto-fill hamstrings grid severely. Defaults could be something like grid-fill-6 = grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)), grid-fill-80 = grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))

[jvanderen1]

I started a discussion thread #8705.