Tailwind CSS `grid-template-columns: auto-fit; grid-template-columns: auto-fill;` and `grid-template-rows: auto-fit; grid-template-rows: auto-fill;`

tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    extend: {
      gridTemplateColumns: {
        'auto-fit': 'repeat(auto-fit, minmax(0, 1fr))',
        'auto-fill': 'repeat(auto-fill, minmax(0, 1fr))',
      },
      gridTemplateRows: {
        'auto-fit': 'repeat(auto-fit, minmax(0, 1fr))',
        'auto-fill': 'repeat(auto-fill, minmax(0, 1fr))',
      },
    },
  },
  variants: {},
  plugins: [],
};

It will generate the following CSS classes:

.grid-cols-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.grid-cols-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
}
.grid-rows-auto-fit {
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
}
.grid-rows-auto-fill {
  grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
}
.sm\:grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.sm\:grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
}
.sm\:grid-rows-auto-fit {
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
}
.sm\:grid-rows-auto-fill {
    grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
}
.md\:grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.md\:grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
}
.md\:grid-rows-auto-fit {
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
}
.md\:grid-rows-auto-fill {
    grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
}
.lg\:grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.lg\:grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
}
.lg\:grid-rows-auto-fit {
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
}
.lg\:grid-rows-auto-fill {
    grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
}
.xl\:grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.xl\:grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
}
.xl\:grid-rows-auto-fit {
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
}
.xl\:grid-rows-auto-fill {
    grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
}

You can use the relevant classes like the following:

<div class="grid grid-cols-auto-fit gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

Or

<div class="h-64 grid grid-rows-auto-fit grid-flow-col gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

Thank you.

Thnx) 👍

Thanks, this is so useful and I believe it should be added to tailwind's default configuration. 👍 @adamwathan

This deserves to be in Tailwind v3.
Thanks man!