Grid
Our grid is the structural foundation for visual elements across web experiences.
It helps us create consistent layouts that work across devices, screen sizes, and environments.
Fixed grid values
We use space tokens to define grid margins and gutters.
| Grid name | Breakpoint | Margins and gutters | Max width | Columns |
|---|---|---|---|---|
| xs | <575px | --rh-space-lg |
100% - 32px | 2 |
| sm | 576px | --rh-space-lg |
544px | 2 |
| md | 768px | --rh-space-2xl |
704px | 12 |
| lg | 992px | --rh-space-2xl |
928px | 12 |
| xl | 1200px | --rh-space-2xl |
1136px | 12 |
| 2xl | >1440px | --rh-space-2xl |
1376px | 12 |
Fluid grid values
| Grid name | Device | Margins and gutters | Max width | Columns |
|---|---|---|---|---|
| Fluid | Desktop and tablet | --rh-space-2xl |
100% | 12 |
| Fluid | Mobile | --rh-space-lg |
100% | 2 |
Best practices
Line length
The width of body text should be 7 grid columns on desktop or 789px max in all layouts.
Do not allow the width of body text to span more than 789px.
Foundations
To learn how to use our other foundations in your designs, visit the foundations section.
