Layout is the spatial arrangement and positioning of content on a web page. A practical approach starts with narrow screens, then adds rules for wider screens so content uses available space without forcing small-screen overrides. section 8.0 section 5.2
Use layout techniques to solve common interface problems:
- Arrange page regions, card containers, and card content across columns and rows with CSS Grid. section 5.2
- Stack content on narrow screens, then expand it as the viewport grows with media queries. section 8.0 section 8.3
- Constrain very wide pages with max-width and center them using automatic side margins. section 4.5.3
- Build interactive card arrangements with Flexbox, positioning, backgrounds, and sizing. section 9.0
Centered responsive page
A newspaper-style page can remain usable on mobile and desktop by giving the body a max-width of 1200px and margin: 0 auto. Moving the background color to html prevents white side bands on wider screens. section 4.5.3
Listing 4.15 Changes to the body and html elements
html { background-color: #f9f7f1 } body {background-color: #f9f7f1;① font-family: 'PT Serif', serif; color: #404040; padding: 0 24px; max-width: 1200px; ② margin: 0 auto; ③ }#1 Moves the background color from the body rule to the html rule #2 Sets the maximum width our page can become #3 Centers the page
Inspect the compact CSS changes that limit the page width, center the body, and preserve the full-page background. section 4.5.3
