A page layout is the spatial arrangement of major sections and content regions. Build it from the outside in: establish headers, footers, sidebars, columns, and grids before fine-tuning internal components. section 3.0 section 8.2.4
The browser calculates each element’s size and position during the layout stage. Because document flow connects elements, changing dimensions, position properties, or the DOM can trigger layout recalculation and reflow. section 16.3.1
Practical layout decisions include:
- Use a layout layer for page-wide structure, such as headers, footers, sidebars, columns, and large grids. section 8.2.4
- Define separate structures for genuinely different pages, such as home, article, and search-results layouts. section 8.2.4
- Choose IDs for unique page layouts and classes for layouts that may repeat; an l- prefix can distinguish layout classes from module classes. section 8.2.4
A two-column page structure
A homepage can use CSS Grid with header and footer spanning both columns, while an article can constrain its main content and center it with auto margins.
Figure 16.12 The three stages of the rendering pipeline
Trace layout as the first stage of rendering, followed by paint and composite. section 16.3.1
