# Animate height from 0 to auto

Published: Mon, Apr 14, 2025
Tags: tip, css, animation

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

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

## References:

- [How to animate an element's height with CSS grid](https://www.stefanjudis.com/snippets/how-to-animate-height-with-css-grid/)
- [Animating CSS Grid (How To + Examples) ](https://css-tricks.com/animating-css-grid-how-to-examples/)