Grid System

The grid system is a set of components that can be used to create different layouts, composed of 12 vertical tracks of equal width.

Properties

Row

The Row supports space, layout, position, color, flexbox, grid-layout and background styled-system props.

Column

NameTypeDefault
offset

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11

amount of vertical tracks that the column should be offset by
0
span

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

amount of vertical tracks that the column should span
1

The Column supports space, layout, position, color, flexbox, grid-layout and background styled-system props.

Examples

The grid system is composed of 12 vertical tracks of equal width. Content can be placed in these tracks by using the Row and Column component.

Columns can occupy more than one vertical track, by changing the span prop to a number between 1 and 12.

Columns can be given an offset, by changing the offset prop to a number between 0 and 11.

The Row and Column components can be used to create different kinds of layouts, combining them with other components of the design system.

This other example, shows how to create a two Column layout with a number of stacking Cards.

Table of contents
PropertiesExamples