'Grid' component
- Julia Boyarshchikova (Deactivated)
- Sergiy Nalyvayko (Unlicensed)
Component type | Layout element |
|---|---|
Component possible inclusions | n/a |
Design source (in Figma) | |
Component status |
Introduction
The grid aims for visual consistency between layouts and to provide flexibility across a wide variety of designs.
Usage
Do’s
For fluid grid use breakpoints to determine where the page layout has to change.
For basic grid use integer values between 1 and 12 to define how many columns will be occupied by the component.
Use the spacing props to control space between children.
A value given to a breakpoint applies to all the other wider breakpoints (unless overridden). For example, xs={12} sizes a component to occupy the whole viewport width regardless of its size.
Width values given to larger breakpoints override those given to smaller breakpoints. For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) when viewport width is 600 or more pixels. For smaller viewports, the component fills all 12 available columns.
The spacing value can be any positive number, including decimals and any string. The prop is converted into a CSS property using the theme.spacing() helper.