Page Layout System — Allowed

This gauge covers Chapter 22 after Travel Booking Patterns.

Learning goal

Name one reusable page-width container, compose it onto semantic sections as a second class, and keep vertical section rhythm consistent without one-off max-width declarations on every block.

Inherited tools

Everything allowed through ../travel/allowed.md remains available for chrome. Prefer tools already learned through Grid, Responsive, and Variables.

New CSS / patterns

• A named container class such as .section-container with:
• max-width (often via var(--max-width) or var(--max))
• horizontal centering (margin-inline: auto or margin: auto)
• side padding
• Optional vertical padding on the container for section rhythm
• Composing the container class alongside a semantic/block class (for example class="section-container hero")
• Alternating section backgrounds for two-tone rhythm outside the container

Learning rules

1. Define the page-width container once. Reuse it on every major band.
2. Put the container class on the semantic element (or a direct inner wrapper) as a second class — do not invent a new max-width rule per section.
3. Full-bleed backgrounds belong on the outer section; constrained content sits in the container.
4. Keep source order meaningful. The container is layout, not a landmark.
5. Prefer a token for the max width (--max / --max-width) so breakpoints and the container stay aligned.

Not allowed

• JavaScript
• A different max-width utility for every section on the same page
• Using the container class as a substitute for main, section, or headings
• Inline styles
• Container queries (see Chapter 25)

Pages

• 01-page-container.html — define and reuse one container class
• 02-compose-sections.html — compose container + semantic/block classes
• 03-section-rhythm.html — full-bleed bands with constrained content

Rules to lean on

Rules 3, 36, 40, 56, 72–80, and the naming guidance in Chapter 23.