62 Grid Rows Expand. 62 of 95.
62/MOTION/62 of 95
Grid Rows Expand
Don't animate height: auto — interpolate 0fr to 1fr.
The problem
Expand animations that target height: auto can't interpolate, so panels jump open or rely on brittle max-height hacks that feel late and mushy.
The solution
Right: grid-template-rows: 0fr → 1fr with overflow hidden on the inner wrapper — height follows content smoothly.
Experiment
Play with the values
320ms
How it works
- The collapsible content is wrapped in a grid so its row size can be interpolated.
- Closed, the grid row is 0fr, which is a length the browser can animate.
- Open, the row becomes 1fr, which grows to the content's height.
- The inner wrapper uses overflow hidden and min-height 0 so the content can actually collapse.
- Transitioning the row size follows the content height, which height: auto cannot do.
Seen in
FAQ accordions
Answers expand to their natural height without guessing a max-height.
Disclosure panels
Settings sections open smoothly whether content is one line or a form.
Mobile menus
Nested nav blocks grow to fit links without clipping or overshooting.
Inline details
“Show more” reveals the rest of a block with a true content-sized tween.