Very clever responsive <article> layout (with gutters and breakout images) achieved using CSS Grid, minmax(), the ch unit and a minimum of fuss. It scales automatically from narrow to wide viewports with no auto margins, max-width or media query manual overrides in sight.
For the blog post page (the page you're looking at right now) I wanted a mobile-friendly layout where the text was centered and readable, where the images/code examples are wide.
The gist of it is this:
.post {
display: grid;
grid-template-columns:
minmax(1.2rem, 1fr)
minmax(auto, 57ch)
minmax(1.2rem, 1fr);
}Simple and deadly.
I can potentially see this as a pattern, or layout primitive, rather than just as something you might use at the top-level of the page for overall layout. I’m looking forward to trying it out!
(via Ahmad Shadeed)