beginnerLayout

A Dashboard That Reflows

Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.

The brief you were given

Build a dashboard: a sidebar, a header, a main area with a grid of tiles of different sizes. It must work from a narrow phone to a wide monitor.

The trap — the wrong fix that looks right

Building the whole thing with flexbox and a set of width breakpoints, because it looks correct at the three widths in the design file. It is correct at those three widths. Between them, tiles on the second row are misaligned with the first because each flex line sizes independently; at a width nobody mocked up, one tile sits alone on a line at full width; and every new tile size needs another breakpoint. The design file is a sample of three points from a continuous range, and a layout that only interpolates at the sample points is not responsive, it is three fixed layouts.