I didn’t discover that grid-template-rows trick for animating to auto in CSS, that was Nelson Menezes.

When I was on Alex Trost’s holiday stream, real quick at the end, I showed a way that CSS can animate to auto dimensions. This is a hell of a trick and it’s pretty great there is a way to get it done in without needing JavaScript to measure things ahead of time. Ideally, CSS would just… let us do this without any trickery.

I mentioned this again in Things CSS Could Still Use Heading Into 2023.

I didn’t discover the (extremely cool) trick for doing it today though. That was discovered by Nelson Menezes back in October 2021. I saw his article then blogged it on CSS-Tricks a week later. It has started working in Chrome and Safari since then, which is nice, but again, CSS should just allow auto transitions and animations.

Just wanted to make sure the history is correct, as I’ve seen a new round of excitement over knowing this is possible today.


CodePen

I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

40 responses to “I didn’t discover that grid-template-rows trick for animating to auto in CSS, that was Nelson Menezes.”

  1. Josh Bickett says:

    This Article was mentioned on brid.gy

  2. Kaique Silva says:

    This Article was mentioned on brid.gy

  3. majid says:

    This Article was mentioned on brid.gy

  4. ¯_(ツ)_/¯ says:

    This Article was mentioned on brid.gy

  5. SRIEVi says:

    This Article was mentioned on brid.gy

  6. This Article was mentioned on brid.gy

  7. This Article was mentioned on brid.gy

  8. In The Loop says:

    This Article was mentioned on brid.gy

  9. Rediche says:

    This Article was mentioned on brid.gy

  10. vasuvasu says:

    This Article was mentioned on brid.gy

  11. Love to see credit given where its due. Admirable move here, Chris.

  12. (Source)rer says:

    This Article was mentioned on brid.gy

  13. Mike Solomon says:

    This Article was mentioned on brid.gy

  14. This Article was mentioned on brid.gy

  15. This Article was mentioned on brid.gy

  16. This Article was mentioned on brid.gy

  17. This Article was mentioned on brid.gy

  18. Radu Rizea says:

    This Article was mentioned on brid.gy

  19. Charl says:

    I absolutely love the series of expressions on Alex’s face when you do this. Those are the looks we all wish our non-web friends and family would have when we show them our exciting code trickery. Instead of, you know, that usual long ooookaaaay look of indifference and confusion I usually get.

  20. This Article was mentioned on brid.gy

  21. Thomas Renck says:

    This Article was mentioned on brid.gy

  22. Batbayar B. says:

    This Article was mentioned on brid.gy

  23. Lee Truitt says:

    This Article was mentioned on brid.gy

  24. This Article was mentioned on brid.gy

  25. Corentin says:

    This Article was mentioned on brid.gy

  26. This Article was mentioned on brid.gy

  27. This Article was mentioned on brid.gy

  28. Shawn Beatty says:

    This Article was mentioned on brid.gy

  29. Oude Dibbes says:

    This Article was mentioned on brid.gy

  30. Simon Lloyd says:

    This Article was mentioned on brid.gy

  31. This Article was mentioned on brid.gy

  32. Chelsea8999 says:

    I didn’t discover that grid-template-rows trick for animating to auto in CSS, that was Nelson Menezes. chriscoyier.net/2023/01/07/i-d…

  33. Chelsea8999 says:

    This Article was mentioned on brid.gy

  34. This Article was mentioned on brid.gy

  35. Changer says:

    This Article was mentioned on brid.gy

  36. This Article was mentioned on brid.gy

  37. James says:

    This Article was mentioned on brid.gy

  38. Sevda says:

    This Article was mentioned on brid.gy

  39. VERYFI says:

    This Article was mentioned on brid.gy

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️