Charts · 17

Thirty years of CSS layout, the same page each way

A header, a sidebar, a main column with a card grid, a footer. Every generation of CSS could build it, and every generation had one thing it could not do that the next one was invented for. The page below is built seven times in the real CSS of each era, rendered by your browser, not drawn. Pick an era, drag the width, and look at the cards: their heights, their alignment, and what happens when the space gets narrow.

Container width100%

Header

Sidebar

Sunrise

Short.

£4

A much longer title that wraps

The body of this one runs to two or three lines so the heights differ.

£12

Main

Sunrise

Short.

£4

A much longer title that wraps

The body of this one runs to two or three lines so the heights differ.

£12

Noon

One line.

£7

Dusk

Two lines of copy here, enough to push the price down a little.

£9

Night

Short.

£3

Footer

What 2017 could do

Two dimensions, named areas, rows and columns that know about each other, auto-fill columns that add and remove themselves as the width changes. The page is a drawing again.

What it could not

The cards still respond to the viewport, not to the space they are actually in: the same card component in a narrow sidebar has no way to know it is narrow.

.page { display: grid;
  grid-template-areas: "head head" "side main" "foot foot";
  grid-template-columns: 30% 1fr }
.grid { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) }