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 the …

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 Google …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>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 …</p> </body> </html>
  • Murray Adcock.
Journal permalink