Chapter Four · Look

Layout

Where things go on the page: the box every element is made of, the arrangement the browser gives you for free, flexbox for things in a line, grid for rows and columns, and positioning for the few things that must float on top.

Chapter 3 decided what things look like: their colours, their type, their spacing tokens. This chapter decides where they go. Layout used to be the hardest part of CSS, full of tricks that broke on the next screen size. Today it rests on a few tools, each built for one kind of arrangement, and knowing which job each tool is for matters more than knowing every property it has.

Five topics. The box model: the four layers of every element, and the one rule that makes widths mean what you wrote. Normal flow and display: the layout the browser gives you before you write any, and how to hide things properly. Flexbox, which lines things up in one direction and gives the site's header its shape. Grid, which arranges things in rows and columns and lays out the project cards. And positioning, for badges, a sticky header and anything that overlaps, with the stacking rules that decide what ends up on top.

The four layout tools and the job each is for

Tool	Arranges things in	Reach for it when
Normal flow	Blocks down the page, words across a line	Almost always: it is the starting point for every page
Flexbox	One direction: a row or a column	A nav bar, a button group, a row that should wrap
Grid	Two directions: rows and columns together	Cards, galleries, a page with a sidebar
Positioning	A spot taken out of the flow	A corner badge, a sticky header, an overlay