CSS masonry (aka grid-lanes) has two orientations: rows and columns.

I'm trying to think of good metaphors...

Row is easy: a brick wall, that's where the masonry term comes from.
Column: many call it waterfall, but trying to put it into an image doesn't work. Motorway works a lot better.

In 2005, The Million Dollar Homepage went viral. It let you buy ad space for $1 a pixel. People went crazy.

Reminiscing about this, I discovered it used a single and an image map for ad links.
So, obviously, I had to create a version of it with CSS grid!

➡️ patrickbrosset.com/lab/million-...

Trying to animate grid-row and grid-column to make an item move around a CSS grid.
It works great as long as I don't use a custom property for the grid size.
If I do, the item jumps between corners on Firefox. Works fine in Chromium.

Left: Chrome
Right: Firefox

See: codepen.io/captainbross...

Friday fun with the web.
I made this with MathML and CSS only 📏📐

Kids learn by having fun. Fun makes everything better.
As adult professionals, we tend to forget this and take ourselves too seriously sometimes.

Make something silly today! I guarantee you'll learn something along the way.

I know it's not 2026 yet, but we can have nice things!

🪗 Here's an accordion component that only uses web platform built-in HTML and CSS features. No need for JS code, no component library.

🔗 patrickbrosset.com/lab/accordion/

Among other things, the object-view-box CSS property makes image editors super easy to implement (once you figure out the zoom/pan maths).

➡️ object-view-box: xywh(100px 70px 300px 200px);

👍 this issue if you need this feature in all browsers 🔗 github.com/web-platform... (Chromium only for now)

A Kanban board demo which uses experimental CSS Masonry support in Chromium, and View Transitions.

Learn more: github.com/MicrosoftEdg...

View transitions for the win.

A Kanban board using CSS Masonry, because why not.

The upcoming CSS Masonry lets you size columns separately and place items in specific columns.

Masonry isn't just about randomly sorted photo galleries!

This, and other demos, at github.com/MicrosoftEdg...