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.
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
Modern CSS snippets. Every old hack, replaced.
Side-by-side comparisons of outdated CSS techniques and their modern native replacements. Grid, custom properties, nesting, container queries, and more.
Modern CSS snippets. Every old hack, replaced.
Side-by-side comparisons of outdated CSS techniques and their modern native replacements. Grid, custom properties, nesting, container queries, and more.
CSS Anchor Positioning Guide | CSS-Tricks
Learn about CSS Anchor Positioning, including its syntax, properties, how it is used to position one element next to another, and even how it's used to resize elements relative to other elements.
CSS is filling the gaps with rules. A way to style gaps in grid and flex. | utilitybend
A practical walkthrough of CSS gap decorations: column-rule, row-rule, rule-break, rule-inset, rule-visibility-items, repeat(), and animation.
Extracting Grid Information Using CSS
It's an interesting and potentially useful trick to have an element know where it is on a grid. That's tricky enough when the items are in one row/column, but what about when they span?
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
Multiple-column layout, rows, rules, and floats
Recently implemented in Chrome are two of my top asks for CSS—the concept of rows in multiple-column layout, and gap decorations for rows and columns in grid, flexbox, and multicol. Rows (using column-wrap) provide a way to use multicol on the web without risking scrolling up and down to read if the columns become taller than the viewport. Gap decorations mean that, for multicol, you can now add a rule between these new rows. This post is a collection of the things I think would be interesting to do in future. If you think so too, and particularly if you have a great use case for any of these, let me know in the comments.
Scroll-Enhanced Experiences | Carmen Ansio | CSS Day 2024
Cross-Document View Transitions: The Gotchas Nobody Mentions | CSS-Tricks
This is Part 1 of a two-part series about cross-document view transitions, going over all the gotchas, from ditching the deprecated way to opt into them to a little-known 4-second timeout.
Carousels with CSS | Blog | Chrome for Developers
Support scroll experiences with navigation buttons and markers with just a few lines of CSS.
Leopeva64 on Twitter / X
Microsoft has been testing 'Olympia' windows in Edge for months now; I still don't know exactly what the purpose of these windows is, but something interesting is that in Canary, these windows have a new UI with floating tabs 🤷:https://t.co/UMcY00v70w pic.twitter.com/GGb7XT8uEG— Leopeva64 (@Leopeva64) July 30, 2025
Modernist tiles with CSS Grid
A Modernist hydraulic tile floor, one motif rotated across the whole room, is something you'll find everywhere in Barcelona. Let's build our own in CSS Grid. Six real motifs, a whole floor of palettes.
bramus/ie-page-transitions
Bringing back Internet Explorer’s Page Transitions thanks to the View Transition API