The Working Approach
Layout Grid focuses on the page skeleton: columns, gutters, outside margins, and how they change across viewport sizes. It distinguishes fluid columns from fixed maximum-width containers and adaptive layouts, so a grid specification can describe behavior as well as a desktop screenshot.
The source is a compact guide, not an implementation library. Its common column counts and breakpoint examples are starting points. The useful output is a grid chosen for the content, with clear instructions for full-bleed areas, contained reading sections, sidebars, and repeated cards.
Expected Deliverables
- A breakpoint table with columns, gutters, margins, and container limits.
- Layout rules for contained, full-bleed, sidebar, and card regions.
- Developer-facing notes explaining adaptation between widths.
From Brief to Review
- 01Choose the Grid Type
Match column, modular, baseline, or compound structure to the content instead of assuming every page needs the same grid.
- 02Specify Width Behavior
Define where columns stretch, where a container stops growing, and when columns or sidebars drop.
- 03Review Intermediate Widths
Check the transitions around breakpoints, not only the smallest and largest reference screens.