Switched from Flexbox to CSS Grid to enable true staggered animations.
Why Grid works better:
- Grid children maintain their grid cell during layout changes
- Buttons can transition individually within their cells
- grid-auto-flow change doesn't force simultaneous repositioning
Changes:
- Container: display: grid with grid-auto-flow
- Desktop: grid-auto-flow: row (vertical stack)
- Mobile: grid-auto-flow: column (horizontal row)
- Buttons: transition: all 0.5s with staggered delays (0s, 0.08s, 0.16s, 0.24s, 0.32s)
Result: Each button now cascades independently when resizing between
desktop and mobile layouts, creating the smooth wave effect.
juanatsap
d4ef91b742