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.