A framework of horizontal and vertical lines that structures the layout of a design. Grids create visual rhythm, alignment, and consistency across screens, and help maintain spatial relationships as layouts adapt to different screen sizes.
Common contexts
- Establishing a 12-column grid in a design system to ensure consistent layout behavior across components built by different designers
- Defining breakpoint-specific column counts so a card grid reflows correctly from desktop to tablet to mobile
- Aligning a complex data table layout to a shared grid so columns feel intentional rather than arbitrary
Use when
From the first frame of a new product or feature — setting a grid early prevents compounding misalignment that becomes expensive to fix after components are built. Always define grid specs as design tokens shared with engineering.
Avoid when
Don't rigidly enforce a grid when it forces meaningful content into awkward proportions — the grid serves the content, and occasionally breaking it intentionally for a key visual creates emphasis that a perfectly consistent layout cannot.
The grid's most important job isn't making things align — it's making design decisions predictable and transferable, so that a developer can implement a layout correctly without needing to ask the designer to measure every component.
Real-world examples
- Bootstrap's 12-column responsive grid is used by over 20% of all websites, standardising column vocabulary (col-md-6, col-lg-4) across millions of developers and making responsive layouts learnable once, applicable everywhere.
- The New York Times digital layout uses a 12-column grid where article text occupies 8 columns and sidebars occupy 4, a proportion derived from decades of print grid research and validated against digital reading speed data.
- Material Design's baseline 8dp grid ensures that every spacing value, icon size, and component height is a multiple of 8, making designs pixel-perfect on any screen density and eliminating subpixel rendering artefacts.