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.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other foundations in your designs, visit the foundations section.
