height: auto에는 전환 효과가 적용되지 않습니다. 대신 grid 행 높이를 0fr에서 1fr로 바꾸면, 내용 높이에 맞춰 부드럽게 늘어납니다. 접혀 있을 때는 visibility: hidden으로 숨겨서, 안쪽 링크로 Tab 키 이동이 되지 않게 합니다. 높이가 바뀌면 주변 배치도 다시 계산해야 하므로 Layout 비용이 듭니다.

애니메이션 속성

grid-template-rows, transform

렌더링 비용

Layout