.element {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
}

.element.open {
  grid-template-rows: 1fr;
}

References:

• How to animate an element’s height with CSS grid
• Animating CSS Grid (How To + Examples)