Skip to content

Relearn CSS layout

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.

Buy Every Layout

Lost your access?

No worries. Add the email address that you used to purchase Every Layout and we’ll re-send your access link.

Layouts

Three boxes stacked on top of each other

The Stack

read
now A simple rectangle shape

The Box

 A rectangle shape centered in the horizontal space

The Center

 A cluster of boxes of different widths, laid out like words in a paragraph

The Cluster

 A narrow and wide element laid out adjacently, transforming into two elements on top of each other

The Sidebar

read
now A set of three horizontally aligned boxes transforming into three vertically stacked boxes

The Switcher

 A box with one large box in its vertical centre and two shorter boxes at its head and foot

The Cover

read
now A grid of equal sized boxes (three columns and three rows)

The Grid

 A box with decorative corners

The Frame

 A box with a horizontal scrollbar containing a line of box-like elements. The last one on the right is cut in half

The Reel

 One box superimposed over a grid of other boxes

The Imposter

 A cross icon

The Icon