CSSだけでheight: 0;からheight: auto;へのトランジション

Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

grid-template-rowsを0frから1frにトランジションさせる。これにより、グリッドアイテムが0から「ナチュラルな」高さにトランジションする。
ただし、これを機能させるためには.accordion-body内のdivにoverflow: hidden;を設定する必要がある。

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ullam ipsam dignissimos perspiciatis consequatur itaque maxime nihil cupiditate veniam. Perferendis!</p>
    </div>
  </div>
</div>

.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}
.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}
.accordion-body > div {
  overflow: hidden;
}