CSS Layout

Bringing Microsoft Internet Explorer’s proprietary “Interpage Transitions” back to Modern Browsers using the View Transition API

Back in late 2024, I started working on a fun end-of-year side project named ie-page-transitions. It”s a CSS + JS library that brings back Microsoft Internet Explorer’s proprietary “Interpage Transitions” to modern browsers, powered by the View Transition API. After sitting unfinished for a while, I finally got all 23 classic effects over the finish line and published the project on page-transitions.style.

12 CSS features you can use today with no build step

Modern CSS features that replace Sass, PostCSS plugins and JavaScript hacks: nesting, :has(), container queries, subgrid and more, checked in September 2026.

CSS does your tooltip positioning now - Matt Smith

CSS can now handle tooltip and dropdown positioning without JavaScript. Learn how anchor positioning, popovers, and anchor-size() simplify UI.

Stop Treating CSS Container Queries Like Traditional Media Queries — Smashing Magazine

Despite broad browser support, container queries remain surprisingly underused and frequently misunderstood. Let’s look at how they differ from media queries, when to reach for each, and how container queries help reusable components respond naturally to the contexts in which they appear. - CSS - Tools - Techniques

Responsive iframes in Chrome 154  |  Blog  |  Chrome for Developers

Chrome 154 adds support for responsively-sized iframes, letting an iframe size itself based on the intrinsic size of its embedded document.

Using maths to balance your heading styles - Craig Abbott

A simple system for styling heading levels using a modular scale

Randomly Place an Element Along Edge of Another Element

We can animate an element along the border edge of another element to random positions... pretty easily? Might as well be a cute dog.

Issue 345 of CSS Layout News | Rachel Andrew | Offprint

Rachel Andrew shares tutorials, video, and browser news with a focus on CSS layout.

Sidenotes with CSS anchor positioning

Sidenotes positioned in the margin with CSS anchor positioning, without JavaScript. On narrow viewports and older browsers, they fall back below...

Issue 344 | Rachel Andrew | Offprint

A new home and new start for CSS Layout News

Non-rectangular shape with border and rounded corners

Ana Tudor published a post on Ko-fi

Better Icon and Label Alignment

There is a common design pattern that sometimes gets missed or overlooked. It’s having a list of items, each with an icon. When the text is one line, the icon is centered, but when the text has multiple lines, the icon is still centered but looks odd.

Remove start and end margins with the margin-trim property

A frequently asked multiple-column layout question is why a new paragraph at the start of the column has additional space above it.

Container style queries and advanced attr(): rethinking how to wire up my components in CSS | utilitybend

Wiring HTML attributes into CSS with advanced typed attr(), and letting container style queries pass that state down to child components.

The CSS Selection - 2026 Edition - Project Wallace

The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.

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.

Get Grid Information using pure CSS

With a few lines of code, you can get the number of columns, number of rows, and item coordinates

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.

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.