A compound grid | Stuff & Nonsense

A visual example showing how overlapping the two grids creates a symmetrical but non-uniform column pattern; areas of negative space are still preserved.
Taken straight from Andy's page, which has many more excellent examples. I find the pattern of the gutters particularly interesting.

I love Andy's new design over on Stuff & Nonsense. A large part of that are the cleverly diverse page layouts. Turns out, underneath that perceived diversity is a consistent grid, made by overlaying a 4-column grid and a 5-column grid. Clever!

Overlapping a 4-column grid and 5-column grid results in eight columns with four different widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6...

👆 which (as Andy points out) can be represented easily using fr units in CSS grid:

display: grid;
grid-template-columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr;

Explore Other Notes

Newer

Terra Ultima

A wonderfully whimsical fantasy art project, Terra Ultima is a collection of natural world mashups by Raoul. There's a book and a Tumblr for more, but I wanted to save a handful of […]

Older

Get the FLoC out

The latest breach of Google's old "do no evil" motto is here: FLoC. As ever, Jeremy has written a well-reasoned and nuanced take on why it's likely a bad idea, both for the web in general and […]
  • I love Andy's new design over on&nbsp;<em>Stuff & Nonsense</em>. A large part of that are the cleverly diverse page layouts. Turns out, underneath that perceived diversity is a consistent grid, made [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.