Add grid-template-rows with 0fr and 1fr for height animation from 0 to auto

[wm-simon]

Hi there.,

as described in this article, the height of an element can easily be animated from 0 to auto using the properties grid-template-rows: 0fr and grid-template-rows: 1fr. It would be good if these properties were added as a standard.
https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/

[sennett]

You can make your own by extending tailwind.config.js like this:

export default {
  theme: {
    extend: {
      gridTemplateRows: {
        "animate-height-open": "1fr",
        "animate-height-closed": "0fr",
      },
    },
  },
};

Then consume in components:

<MyAnimatedHeightWithGrid classNames="grid  grid-rows-animate-height-open  transition-all  duration-700  ease-in-out" />

[czepiec]

You can also use also grid-cols-[0fr] or grid-rows-[0fr] classes like:

<div id="myElement" class="grid grid-cols-[0fr] duration-500">
  <div class="overflow-hidden">
    ...
  </div>
</div>

and onclick="document.getElementById('myElement').classList.add('grid-cols-[1fr]');" (add or remove) somewhere.