Print to CSS – Magazine layouts recreated with CSS Grid

Just like Jules Forrest before, Dan Davies has recreated some magazine layouts using CSS Grid: I’m a huge fan of magazine layouts, the use of typography, the structures, just the general look. I also love CSS Grid and as part of my learning, I have been looking at magazines for inspiration so I decided to […]

Fullwidth Content Strips and CSS Subgrid = ❤️

When having fullwidth content strips on your site CSS Grid is a thankful piece of technology. You can use it to place items between the first and last grid-line, as detailed in Breaking Elements out of Their Containers in CSS 💁‍♂️ Alternatively you can also use this .full-bleed utility class To lay out the content […]

Flexbox Holy Albatross with CSS Grid

In succession to The Flebox Holy Albatross, Jonathan Snook wondered if he could recreate it using CSS Grid. ℹ️ To recap, with the Flexbox Holy Albatros a layout goes from either all items stacked next to each other (e.g. all horizontal) to all items stack on top of each other (e.g. all vertical): There’s no […]

CSS Logical Properties and Values, the next Step of CSS Evolution

Still in draft, yet already thoroughly supported, is the CSS Logical Properties and Values Level 1 Specification, a CSS module which gets me excited. CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings. […]

Relearn CSS layout with “Every Layout”

As just announced (on stage) at CSS Day by Heydon himself: If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. […]

CSS masonry with flexbox, :nth-child(), and order

Tobias Ahlin: On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order. Flexbox […]