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.

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

1
2

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

Create a free Business Account

Make managing employee and guest travel easier. It only takes a couple of minutes to get started!

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis aenean et tortor at risus viverra adipiscing at. Duis ultricies lacus sed turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu tincidunt tortor aliquam nulla facilisi. Lobortis elementum nibh tellus molestie nunc. Faucibus et molestie ac feugiat sed lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo quis imperdiet massa tincidunt. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Id cursus metus aliquam eleifend mi in. Pretium fusce id velit ut tortor pretium viverra suspendisse.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. A diam maecenas sed enim ut. Maecenas sed enim ut sem. Laoreet id donec ultrices tincidunt arcu. Nunc congue nisi vitae suscipit tellus mauris. Euismod lacinia at quis risus sed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel eros donec ac odio tempor. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. A diam maecenas sed enim ut. Maecenas sed enim ut sem. Laoreet id donec ultrices tincidunt arcu. Nunc congue nisi vitae suscipit tellus mauris. Euismod lacinia at quis risus sed.

Table of contents
PropertiesExamples