Grid

The grid system in UI is based on a 12 column grid.

There are three main grid components:

  • Grid - an outer container that sets a max width, and horizontally centers the rest of the page
  • Row - used for a single horizontal row of content. Row also manages spacing between child columns, and gutters to the left and right.
  • Column - used for a single vertical column of content.

Spacing

The spacing between columns is managed by the parent Row column. This enforces uniform spacing. One-off adjustments are inevitable, so as all of the grid components compose from either Box or Flex, margin and padding props are available. However where possible, we reccomend to make use of the columns, gutter, and spacing props.

Props

NameTypeDescription
children
any
fluid
bool
className
union

Responsive Grid

A grid with responsive columns
2
10
3
9
4
8
12
<Grid> <Row is="section" justifyContent="space-between" marginBottom="large" > <Column columns={[ 12, 12, 2 ]} > <DemoSlab> 2 </DemoSlab> </Column> <Column columns={[ 12, 12, 10 ]} > <DemoSlab> 10 </DemoSlab> </Column> </Row> <Row marginBottom="large"> <Column columns={[ 12, 12, 3 ]} > <DemoSlab> 3 </DemoSlab> </Column> <Column columns={[ 12, 12, 9 ]} > <DemoSlab> 9 </DemoSlab> </Column> </Row> <Row marginBottom="large"> <Column columns={[ 12, 12, 4 ]} > <DemoSlab> 4 </DemoSlab> </Column> <Column columns={[ 12, 12, 8 ]} > <DemoSlab> 8 </DemoSlab> </Column> </Row> <Row> <Column> <DemoSlab> 12 </DemoSlab> </Column> </Row> </Grid>

Nested grid

Rows and columns can be nested as deeply as possible
2
2
5
7
<Grid> <Row alignItems="center" marginBottom="large" > <Column columns={2}> <DemoSlab> 2 </DemoSlab> </Column> <Column columns={10}> <DemoSlab> <Row> <Column columns={2}> <DemoSlab> 2 </DemoSlab> </Column> <Column columns={10}> <DemoSlab> <Row> <Column columns={5}> <DemoSlab> 5 </DemoSlab> </Column> <Column columns={7}> <DemoSlab> 7 </DemoSlab> </Column> </Row> </DemoSlab> </Column> </Row> </DemoSlab> </Column> </Row> </Grid>

With justification

Justification can be added to horizontally align columns
2
2
<Grid> <Row justifyContent="space-between"> <Column columns={2}> <DemoSlab> 2 </DemoSlab> </Column> <Column columns={2}> <DemoSlab> 2 </DemoSlab> </Column> </Row> </Grid>

Card example

An example of how to use the grid inside a card

A longer project title

Project Ongoing
<Grid> <DemoCard> <Row alignItems="center" spacing="small" > <Column columns={[ 12, 6, 4 ]} > <H3 margin="none"> A longer project title </H3> </Column> <Column columns={[ 12, 6, 4 ]} > <Text> Project Ongoing </Text> </Column> </Row> </DemoCard> </Grid>

Form example

An example of how to use the grid with form elements
<Grid> <Row alignItems={[ 'center', 'flex-start' ]} > <Column columns={[ 12, 6 ]} > <Input placeholder="Your name" /> </Column> <Column columns={[ 12, 6 ]} > <Input placeholder="Your email" /> </Column> </Row> </Grid>