Css Grid Columns "auto-fit" default 🤞

[stuyam]

This was already suggested in an issue here: #1403

But I thought it was an interesting one to bring up again. It would be really cool if there was default config for some auto-fit grid sizes. Something like this:

module.exports = {
  theme: {
    gridTemplateColumns: {
      'xs': 'repeat(auto-fit, minmax(6rem, 1fr))',
      'sm': 'repeat(auto-fit, minmax(10rem, 1fr))',
      'md': 'repeat(auto-fit, minmax(14rem, 1fr))',
      'lg': 'repeat(auto-fit, minmax(18rem, 1fr))',
      'xl': 'repeat(auto-fit, minmax(26rem, 1fr))',
      '2xl': 'repeat(auto-fit, minmax(34rem, 1fr))',
      '3xl': 'repeat(auto-fit, minmax(42rem, 1fr))'
    },
  },
}

Then you would have classes like grid-col-xs for atomically small grid columns and grid-col-lg for automatically larger grid columns. The nice thing with auto-fit and this setup is you could just throw grid grid-col-md on a parent and have an automatically responsive grid child elements based on container size not just with width of the screen. Could also name it fit-md so it would be grid-col-fit-md but I like the shorter one because there is no existing conflict anyways.

The other advantage here that I ran into recently, is that I had a smaller container on larger screens in the form of a sidebar, and on smaller screens the sidebar because a modal so it actually widened to allow more horizontal elements automatically. It's based on container size and no media queries making it just work for most grids.

Imagine class="grid grid-col-lg gap-4" for the most automatic responsive simple grid ever.

I know the argument can be made for the fact that this can just be added to your tailwind config (thanks to Tailwind being so flexible 👍 ) but I thought I would make a case for it being a default.