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.

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

Signup for updates

This project is currently a work in progress and there is a lot more content to come, so we’re working hard to ensure it brings you the most value that it possibly can.

Sign up to be notified when Every Layout is ready ↓ (your email will be used for no other purpose).

    A full set of composable CSS layouts, documented with interactive examples and code generators

    A library of interoperable custom elements (“layout components”) to experiment with and use in your applications.

    Every Layout as a book, in the EPUB format, for reading offline and on planes.

Every Layout is here to help you learn (or relearn) CSS layout, using simple components (primitives) and a compositional approach. Understand and harness the power of modern CSS and the algorithms that power it.