CSS Child / Layout as Intent

One dimension or two, and how to tell which you need.

Arrangement comes in two flavours, and choosing correctly makes most layout problems straightforward.

There are two fundamentally different arrangement problems and they deserve different tools. The first is a single line of things, along a row or down a column, where you care about how they are distributed along that line and how they line up across it. A navigation bar is this. A row of buttons is this. A label beside a value is this. The defining quality is that you are thinking about one direction at a time, and the other direction takes care of itself according to how tall or wide the contents happen to be.

The second is a genuine two dimensional arrangement, where things must line up both across and down at once. A page divided into a header, a sidebar, a main region and a footer is this. A gallery where every item must align into consistent columns and consistent rows is this. The defining quality is that a decision in one direction constrains the other: you cannot work out the columns without also working out the rows, because the whole point is that the two align. Trying to build this out of nested single line arrangements is possible and it is miserable, because alignment between separate lines is exactly what single line arrangement does not give you.

The diagnostic question is short. Do the items in one row need to line up with the items in the row below? If they do, you have a two dimensional problem and you should reach for a two dimensional tool. If they do not, and each row is free to arrange itself independently, one dimensional arrangement is simpler and will serve you better. Most real pages use both, at different levels: a two dimensional structure for the overall page, with one dimensional arrangements inside the individual regions, each doing the job it is suited to.