Chapter 22 — Page Layout System

Name one page-width container, compose it onto sections, and keep band rhythm consistent.

New concepts

A reusable .section-container (max-width + centering + side padding), second-class composition on semantic elements, and full-bleed bands with constrained content.

Read the Page Layout System gauge

What changes after Travel?

Earlier chapters set max-width as one-off declarations. This chapter turns that technique into a named layout primitive you reuse across a whole page.

Lessons

  1. 1. Name one page container
  2. 2. Compose container + semantic classes
  3. 3. Full-bleed bands with section rhythm

Checkpoint

Build a three-band page that uses one container class at least three times, keeps backgrounds full-bleed, and never invents a second max-width utility for the same document.