CSS: Transitioning to Height Auto

A reminder on how to do transition height to auto in CSS.

I keep forgetting this. Originally, i found this nifty CSS way for a slide-to-show thing in a youtube video by Kevin Powell. Along with the original blog post by Keith J. Grant.

Here's how to do it:

1<div class="wrapper">
2  <div class="inner">Expandable content</div>
3</div>

1.wrapper {
2  display: grid;
3  grid-template-rows: 0fr;
4  transition: grid-template-rows 0.5s ease-out;
5}
6
7.wrapper.is-open {
8  grid-template-rows: 1fr;
9}
10
11.inner {
12  overflow: hidden;
13}