A layout is a set of decisions about what adapts and what holds. Naming those decisions in the file, rather than discovering them in the browser, is what makes a design maintainable, and it is also what makes it reviewable by anyone who has not written it.
About 1 min of reading
Put the scales in the file.
Type scale
Before you run it, say out loud what it will print. Then open the answer.
Spacing scale
Before you run it, say out loud what it will print. Then open the answer.
The measure
Before you run it, say out loud what it will print. Then open the answer.
A line of text has a comfortable length, and past it the eye loses the next line. Capping the measure is a decision that fixes reading on every screen, and it is the one constraint worth applying everywhere.
Vertical space between blocks from the same scale makes a page feel settled. That rhythm is a rule in the file, not a value tuned per section, and it is what makes a long page readable.
Name which sizes scale with the window and which are fixed. Text and tap targets are fixed; columns and gaps usually scale. Writing that choice down stops the next editor guessing.
A handful of steps, each a multiple of the one below, gives a page that looks related throughout. Six unrelated pixel sizes look like a design that was never designed.
Spacing from a small set of steps makes two elements next to each other look intentional. A page with 13, 17, and 22 pixel gaps has three numbers that no reader can explain.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.