Animating CSS Grid Layouts with CSS Anchor Positioning

https://www.bram.us/wordpress/wp-content/uploads/2026/09/animated-css-grid.mp4Recording of the animated grid demo. At CSS Day (back in June), someone asked me how Brave (the browser) might have built their New Tab Page which features some tiles laid out in a grid. While the grid is nothing spectacular, something special happens with it when you resize the viewport: as the available space changes, the grid nicely reorganizes itself in an animated way. The animations are also interruptible, so no View Transitions seem to be at play. So, how did they do it? I’m not sure. But if I were to recreate it, I’d use CSS Anchor Positioning with regular CSS Transitions on top. ~ 💁‍♂️ Not familiar with Anchor Positioning yet? Check out my post Anchors Aweigh! which explains all you need to know about it (video included!). ~ # The Technique The trick here is to use CSS Anchor Positioning and anchor the cell’s content to the cell itself. Since you can’t anchor content directly onto a grid’s cell —…