Анимация `height: auto` без JS через `display: grid`

Ограничение CSS: height: auto не анимируется.
Поэтому при создании аккордеонов, FAQ или раскрывающихся блоков часто используют:

• max-height с большим значением
• вычисление scrollHeight через JS
• transform: scaleY

Есть более аккуратный способ — через display: grid.

Идея в том, что grid-template-rows можно анимировать.

Пример:
HTML:

<button class="btn">Открыть</button>
<div class="wrapper">
  <div class="content">
    Контент любой высоты
  </div>
</div>

CSS:

.wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.wrapper.open {
  grid-template-rows: 1fr;
}
.content {
  overflow: hidden;
}

JS:

document.querySelector('.btn').onclick = () => {
  document.querySelector('.wrapper').classList.toggle('open')
}

Как это работает:
0fr — строка не занимает пространство
1fr — строка занимает доступное пространство

Grid перераспределяет высоту строки, и это изменение можно плавно анимировать.

Преимущества:
• не нужно вычислять высоту
• нет искусственных ограничений по max-height
• корректно работает с динамическим контентом
• минимальный JS

Подходит для:
• аккордеонов
• раскрывающихся карточек
• меню
• блоков с дополнительной информацией

#практика