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;