TGViewer
Front End World Front End World @front_end_first · 25.9K subscribers
Post #6959 913
Animating CSS Grid Layouts with CSS Anchor Positioning

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.

https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
  • 👍 1
More from @front_end_first
  1. Sep 30, 2026One SVG, nine posters: CSS linked parameters An SVG placed as a content image or a backgro…
  2. Sep 30, 2026The V8 JavaScript Runtime Undermined My Constant-Time JavaScript Library https://soatok.bl…
  3. Sep 30, 2026Migrating Reactive Forms to Angular 22 Signal Forms: When and How Learn when to migrate Re…
  4. Sep 29, 2026TypeScript Tricks Working Frontend Engineers Actually Use: satisfies, Branded Types, and E…
  5. Sep 29, 2026Custom Glow Rings Inside of Elements https://blog.master.dev/custom-glow-rings-inside-of-e…
  6. Sep 29, 202610 browser APIs that replaced a library I used to install Ten browser APIs that replace np…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →