How CSS layout works now

Before we touch Grid or Flexbox, it helps to know what the browser does with your HTML when you give it no layout instructions at all. That default behaviour is called normal flow, and every modern layout technique is a way of changing it for part of the page.

In normal flow, block elements such as div, p and section stack vertically and take the full width of their parent. Inline elements such as a, span and strong sit side by side inside a line of text and wrap when they run out of room. Most of the time this is exactly what you want for text content, which is why good layouts change normal flow only where needed.

The three questions behind every layout

When you look at a design, ask three questions:

1. Is this a single row or column of items? That is a Flexbox job.
2. Do items need to line up in both rows and columns at once? That is a Grid job.
3. Should a component change shape based on the space it is given, not the screen size? That is a container query job.

Media queries still matter, but mostly for page level decisions such as hiding a sidebar on small screens.

What changed in recent years

All current browsers support Flexbox, Grid, subgrid, container queries, the gap property for Flexbox, logical properties like margin-inline and math functions like clamp(). That means you no longer need float based grids, negative margin tricks or most layout utilities from CSS frameworks.

In this course we will build every pattern with plain CSS in a single starter project. Open the starter, run it with any static server (the Live Server extension in VS Code is fine) and keep the browser dev tools open. You will use the Grid and Flexbox overlays constantly, and they are the fastest way to see what the browser is actually doing.

In the next lesson we look at the box model, because a surprising number of layout bugs are really sizing bugs.