With the release of Chrome 125, we now have anchor-positioning landing in CSS.

Right off the bat, one thing I love about it is how much it reminds me of iOS’s approach to layout. I’ve been wanting some kind of constraint resolver in CSS since I first built a couple of native iOS apps way back in 2015. Before SwiftUI, iOS interfaces were created with a layout engine called AutoLayout, which is based on a constraint-resolution algorithm called Cassowary.

I won’t go into depth about AutoLayout, but suffice to say that it makes layout very easy in most cases. I’ve always thought it was a shame that we didn’t have an equivalent on the web, though via a quick Google search I came across a handful of attempts:

• GSS (grid style sheets)
• CCSS (Constraint Cascading Style Sheets)
• Layx
• CassowaryJS

Here’s a basic example of anchor-positioning:

Another thing I love about this syntax is how easy it maps to spoken language. It’s not hard to imagine uttering the following sentence - “I want the top of the blue square to be at the bottom of the red square”. It’s one of the things I’d been trying to accomplish with Matry - I wanted a layout framework that aligned to designers’ vocabulary and mental models.