Elements of a grid
Columns
Columns define where content lives. Content can span across several columns or occupy one column. Column width is define by relative units and resize depending on the breakpoint.
Gutters
Gutters are the space between columns. This space separates content, allowing for visual balance and better organization of related content. Gutters can resize depending on breakpoint or stay the same across sizes.
Margins
Margins occupy the left and right space on either side of the grid. Anything contained within the grid will not extend past these margins. Certain components, like primary navigation, can be full bleed, meaning they can span across the margins. The margins can resize depending on breakpoint or remain the same across sizes.
Types of grids
Fluid
A fluid grid spans the entire width of the viewport at any breakpoint.
Fixed
Fixed grids usually refer to a set maximum width. Fixed grids can behave exactly like a fluid grid, up until a certain width, after which, the grid stays the same width, while the margins extend to fill any extra space on the screen. If using a fixed grid, remember that the grid still restricts the components within it. This means that anything on the grid will stop extending as the grid stops.
Breakpoints
The following are our standard breakpoints. Legacy breakpoints may vary depending on platform or product.
| Breakpoint | Sass | Dimensions |
|---|---|---|
| Extra small | N/A | 0-575px |
| Small | $breakpoint-sm-min |
576-767px |
| Medium | $breakpoint-md-min |
768-991px |
| Large | $breakpoint-lg-min |
992-1199px |
| Extra large | $breakpoint-xl-min |
1200-1399px |
| Extra extra large | $breakpoint-xxl-min |
1400px and above |
Usage
Do
- Use the same grid across a platform or product
- Stick to a maximum of 12 columns
- Use standard breakpoints
Don't
- Use tables for layout
- Use floats for layout
- Set fixed pixel dimensions