I have a simple css grid with X grid-items. The number of grid-items can be variable, their sizes can also vary. I need to create a simple expander, so only certain number of rows is going to be visible at first, but after button click event it is going to expand to full height and show all columns.

I have tried to set transition for grid-auto-rows, which would have value of 0fr initially, but the property does not seem to be animatable like gird-template-rows is.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-auto-rows: 0fr;
  gap: 1rem;
  transition: all 0.5s ease;
}

.grid.expanded {
  grid-auto-rows: 1fr;
}

Here is a link to a codepen I created for test.