theAdhocracy | A compound grid

Source
Link to Original 🔗
Published
05 May 2021
Categories
Web Design
Tags
CSS Grid,layout,web design,grid

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 […]

I love Andy's new design over on <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 […]
19 May 2024
Murray Adcock

Journal permalink