CSS Child / Layout as Intent

Describe the relationship, do not place the pieces.

The shift from positioning things to stating how they relate is the largest single step in learning layout.

Beginners tend to approach layout as though the page were a sheet of paper and they had a ruler. This thing goes here, that thing goes forty units to the right, this other thing needs to move down a bit. It is an entirely natural approach and it produces layouts that shatter the instant anything changes: a longer word, a narrower screen, an extra item, and the careful arrangement of coordinates is now a pile of overlapping fragments. The reason is that coordinates describe one particular outcome rather than the reasoning that produced it, and the browser cannot re-derive your reasoning from a set of numbers.

The alternative is to describe relationships and let the browser calculate positions. These three things sit in a row, evenly spaced, aligned along their centres. This region takes whatever room is left after that fixed panel has taken what it needs. These items wrap onto a new line when there is not enough width for them. Every one of those is a statement about intent, and every one of them remains true at any width, with any number of items, with any length of text. You have told the browser what you want rather than what you calculated, and it recalculates for you whenever conditions change.

This is why layout is worth learning conceptually before touching any particular mechanism. The mechanisms are just ways of expressing categories of intent, and once you can name the intent, choosing the mechanism is nearly automatic. When a layout misbehaves, ask yourself what relationship you were actually trying to express, and whether you expressed it or merely arranged for it to appear true at one particular size. The answer is almost always the second one, and correcting that is a far better use of an hour than adjusting numbers until the picture looks acceptable again.