Layout

The whole point of auto-fit and auto-fill is that you aren’t saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

Google Translate doesn’t change the `dir` of a site when translating from LTR to RTL… but you could.

Last we checked in with how the web platform was planning on helping us with “masonry” layout, it was a versus battle between “just use grid” and “make a new layout type”. Now Apple folks have an idea: a new shorthand property called item-flow. Nothing is decided here (I don’t think), but it seems very […]

Ahmad Shadeed on CSS display: contents; — a feature that makes the DOM pretend that element just isn’t there (but it’s children are). Anything you use it for requires specific accessibility testing, but it can be quite useful. There are lots of use-cases here many of which boil down to “sometimes I want all these […]

Stefan Judis covered this recently, and like Stefan, I first heard of the safe keyword in CSS from Rachel Andrews at an AEA conference years ago. It’s used in addition to other alignment keywords in layout like this for example: The extra value safe here is essentially saying “don’t let the alignment force a situation […]

A left-and-right layout is blissfully easy with CSS grid. Something like grid-auto-rows: 1fr; will do it — just put two elements as the children. This is how I like to roll though, making two equal columns that can shrink properly: But Ryan Mulligan found a very interesting way to make it complicated in The Fifty-Fifty […]

Rachel Andrew, blowing my mind a bit: The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout. While the property was specified to work in block layout, no browser had implemented it, until now. align-content in block layout So now […]