Loading…
12
Spent 9 hours debugging a card flip animation because grid items were stretching to fill the row
Last Tuesday I built a simple flip card layout with grid and the backs kept showing through the fronts on every hover. I checked my transform, my perspective, my backface-visibility, nothing worked, and I burned through 3 hours just on the backface settings alone. Turns out grid items stretch to fill their track by default, so my cards were 200px tall when the front face was only 140px, leaving dead space that showed the back. One line of align-items: start on the grid container fixed all of it in about 4 seconds. Did anyone else learn the stretch behavior the hard way, or did I just skip that part of the docs?
0 comments
Log in to join the discussion
Log In0 Comments
No comments yet
Be the first to share your thoughts on this discussion.