grid-template-rowsを0frから1frにtransitionさせることでheightがautoのアコーディオンをCSSのみでアニメーションさせる 🪗

DOMの高さを0からautoにCSSアニメーションでスムーズに変更したいとき、grid-template-rowsを使うといい感じになるということを教えていただきました。

DEMO

SCSS（抜粋）

dd {
  display: grid; // ❶
  grid-template-rows: 0fr; // ❸
  transition: grid-template-rows .2s ease-in-out; // ❺

  > div {
    overflow: hidden; // ❷
  }
  
  :has(:checked) & {
    grid-template-rows: 1fr; // ❹
  }
}

1. displayをgridにする
2. gridにした要素の直下の要素のoverflowをhiddenにする
3. 高さを0にしたいときはgrid-template-rowsを0frにする
4. 高さをautoにしたいときはgrid-template-rowsを1ftにする
5. gridにした要素にtransitionを設定する

これでOKです。
上記の例では、チェックボックスのチェックの有無で開いたり閉じたりするようにしているので、JavaScriptは0行です。