Skip to main content

Breaking Out With CSS Grid Layout (on

Visit external resource

While bookmarking the article yesterday, I started getting the feeling that something was awfully familiar. It was! I’ve seen this layout before – from Tyler Sticka back in 2017 to be precise – but failed to bookmark it at the time.

Here, then, is the original and still the best CSS Grid “article with breakout images” layout!

I particularly love the way that, by naming the lines and appending -start and -end as appropriate you can then target the area between those lines using its short name.

.Prose {
display: grid;
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 40em) [main-end]
minmax(1em, 1fr) [full-end];

.Prose > * {
grid-column: main;

.Prose-splash {
grid-column: full;
External Link Bookmark Note Entry Search