How to animate an element’s height with CSS grid (#snippet)

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 an element's height from 0 to something (auto).

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 toggle an element's height:

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 an open class

.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.

[Interactive component: visit the article to see it...]

I'm blown away by this!

And sure, to Chris' point, it'd be nice to have an easier way to animate element heights, but I'll take this approach for now! Thanks Chris! 💯