Ephemeral padding when animating grid row height
Following the approach here to animate height from "0" to "auto": https://www.youtube.com/watch?v=B_n4YONte5A. It's a neat trick avoiding JS, but I'm wondering what's going on with the white-space at the bottom in this screen recording (the orange section is the grid-row that's animating from "0fr" to "1fr"), and if there's any way to get rid of it.
YouTubeKevin Powell
Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement!
Links
Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...
Links Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
