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
<Row>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
1
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
2
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
3
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
4
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
5
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
6
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
7
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
8
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
9
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
10
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
11
</Box>
</Column>
<Column>
<Boxbg="#f1f2f4"textAlign="center">
12
</Box>
</Column>
</Row>
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
<Rowmb={3}>
<Columnspan={2}>
<Boxbg="#f1f2f4"textAlign="center">
1
</Box>
</Column>
<Columnspan={2}>
<Boxbg="#f1f2f4"textAlign="center">
2
</Box>
</Column>
<Columnspan={2}>
<Boxbg="#f1f2f4"textAlign="center">
3
</Box>
</Column>
<Columnspan={2}>
<Boxbg="#f1f2f4"textAlign="center">
4
</Box>
</Column>
<Columnspan={2}>
<Boxbg="#f1f2f4"textAlign="center">
5
</Box>
</Column>
<Columnspan={2}>
<Boxbg="#f1f2f4"textAlign="center">
6
</Box>
</Column>
</Row>
<Rowmb={3}>
<Columnspan={3}>
<Boxbg="#f1f2f4"textAlign="center">
7
</Box>
</Column>
<Columnspan={3}>
<Boxbg="#f1f2f4"textAlign="center">
8
</Box>
</Column>
<Columnspan={3}>
<Boxbg="#f1f2f4"textAlign="center">
9
</Box>
</Column>
<Columnspan={3}>
<Boxbg="#f1f2f4"textAlign="center">
10
</Box>
</Column>
</Row>
<Rowmb={3}>
<Columnspan={4}>
<Boxbg="#f1f2f4"textAlign="center">
11
</Box>
</Column>
<Columnspan={4}>
<Boxbg="#f1f2f4"textAlign="center">
12
</Box>
</Column>
<Columnspan={4}>
<Boxbg="#f1f2f4"textAlign="center">
13
</Box>
</Column>
</Row>
<Rowmb={3}>
<Columnspan={6}>
<Boxbg="#f1f2f4"textAlign="center">
14
</Box>
</Column>
<Columnspan={6}>
<Boxbg="#f1f2f4"textAlign="center">
15
</Box>
</Column>
</Row>
<Row>
<Columnspan={12}>
<Boxbg="#f1f2f4"textAlign="center">
16
</Box>
</Column>
</Row>
Columns can be given an offset, by changing the offset prop to a number between 0 and 11.
1
2
<Row>
<Columnspan={2}offset={2}>
<Boxbg="#f1f2f4"textAlign="center">
1
</Box>
</Column>
<Columnspan={2}offset={4}>
<Boxbg="#f1f2f4"textAlign="center">
2
</Box>
</Column>
</Row>
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!
<Rowmb={3}>
<Columnspan={12}>
<Headlineas="h2">Create a free Business Account</Headline>
<Textas="p">
Make managing employee and guest travel easier. It only takes a couple
of minutes to get started!
</Text>
</Column>
</Row>
<Rowmb={3}>
<Columnspan={6}>
<Inputlabel="First Name"width="100%"/>
</Column>
<Columnspan={6}>
<Inputlabel="Last Name"width="100%"/>
</Column>
</Row>
<Rowmb={3}>
<Columnspan={6}>
<Inputlabel="Email"width="100%"/>
</Column>
<Columnspan={2}>
<Inputlabel="Area Code"width="100%"/>
</Column>
<Columnspan={4}>
<Inputlabel="Phone Number"width="100%"/>
</Column>
</Row>
<Row>
<Columnspan={6}offset={6}>
<Buttonwidth="100%">Sign up forFREENOWfor Business</Button>
</Column>
</Row>
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.
<Boxbg="#f1f2f4"p={3}>
<Row>
<Columnspan={6}>
<Cardlevel={100}mb={3}>
<Textas="p">
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.
</Text>
</Card>
<Cardlevel={100}mb={3}>
<Textas="p">
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.
</Text>
</Card>
<Cardlevel={100}>
<Textas="p">
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.
</Text>
</Card>
</Column>
<Columnspan={6}>
<Cardlevel={100}mb={3}>
<Textas="p">
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.
</Text>
</Card>
<Cardlevel={100}mb={3}>
<Textas="p">
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