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

The simple trick to transition from height 0 to auto with CSS

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-...

Pete (he/him)OP•4/4/24, 3:27 PM

Compare to using FLIP in JS

2024-04-04_at_11.26.15_-_Tomato_Rabbit.gif

Pete (he/him)OP•4/4/24, 3:28 PM

Codepen here https://codepen.io/ptrfrncsmrph-the-vuer/pen/poBaoZr

Kevin Powell•4/4/24, 5:49 PM

I had someone else ask me something about this awhile ago and, as far as I could figure, it's as if the timing-functions are different, but there's no way to change the timing of inner things, as it's just following the expansion and doing it's own thing.

If there's a workaround for this, I haven't figured it out

Pete (he/him)OP•4/4/24, 6:48 PM

Yeah it does seem like a different timing-function, though I tried using a few different timing-functions on the animation and haven't been able to get it to match the inner animation timing

it's a mystery...

Chris Bolson•4/4/24, 8:04 PM

Adding to the parent grid element should resolve the issue (which interestingly doesn't happen on Firefox)

Chris Bolson•4/4/24, 8:09 PM

It's a neat trick avoiding JS,

But you are using JS to toggle it

If you want a true CSS only solution you should use a hidden radio button or checkbox.

Pete (he/him)OP•4/5/24, 3:02 AM

Adding to the parent grid element

That works, thanks! I was considering not using this technique even though it's the simplest, just because of that odd behavior. May I ask how you knew that, or how you figured it out?

If you want a true CSS only solution you should use a hidden radio button or checkbox.

Good point. The above codepen was just a scratchpad, but ultimately I was going to use something like this for expandable list items, basically an accordion pattern. My first thought was to use to track expanded state in the DOM, but I don't think I can unfortunately, because the section contains heading(s). I hadn't considered using checkboxes.

Chris Bolson•4/5/24, 12:33 PM

Just in case it is any use, I have put together a quick demo using hidden checkboxes.
It includes 3 methods but they are basically the same:
https://codepen.io/cbolson/pen/eYoVMmg

Chris Bolson•4/5/24, 12:34 PM

Note - with the checkbox method, if you want to only have one open at the same time, just swap the checkboxes for radio buttons and ensure that they all have the same name.

CChris Bolson Adding `align-items: start;` to the parent grid element should resolve the issue...

Kevin Powell•4/5/24, 12:34 PM

oh, that's so interesting! I'd love to know why that works... lol. Must be something with how is calculated?