How to animate an element's height with CSS grid

Did Chris just publish a post and unveil the solution to a long-lasting CSS problem almost in a side sentence? It seems like it!

What of the many are we walking about? We're talking about animating (or transitioning) an element's height from 0 to something (auto) just with CSS. That's right – this is possible in all modern browsers today. No JavaScript required!

Not too long ago, browsers shipped animatable CSS grid columns and rows which you could use to fly in a side menu or do fancy stuff like Michelle Barker. 👇

I've never considered using animated grid rows to hide grid cells, though.

Here's the trick to transition an element's height to auto:

1. define a grid element
2. define a single grid row with 0fr
3. add a transition for grid-template-rows
4. set overflow: hidden to the one element inside the grid
5. redefine the grid-template-rows to be 1fr with a CSS class or attribute selector

.grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
}

.grid.open {
  grid-template-rows: 1fr;
}

.grid-inner {
  overflow: hidden;
}

And voila! You can now transition an element's height, and it doesn't use any hardcoded values – toggle a class and call it a day! CSS Grid figures out all the rest.

I. Am. Blown. Away!

But to Chris' point, it'd be nice to have an easier way to animate element heights. Word! For now, I'll take this approach, though! Thanks Chris! 💯