Row and Column

For doing grid layouts.

Usage

<Box>
  <LayoutProvider>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={8}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={6}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={6}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
  </LayoutProvider>
</Box>

<Box>
  <LayoutProvider>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={1}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={8}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={4}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
    <Box paddingVertical={16}>
      <Container>
        <Row>
          <Column medium={6}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
          <Column medium={6}>
            <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
          </Column>
        </Row>
      </Container>
    </Box>
  </LayoutProvider>
</Box>

Column wrapping

<LayoutProvider>
  <Box paddingVertical={16}>
    <Container>
      <Row>
        <Column xsmall={9}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
        <Column xsmall={4}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
        <Column xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
    </Container>
  </Box>
</LayoutProvider>

<LayoutProvider>
  <Box paddingVertical={16}>
    <Container>
      <Row>
        <Column xsmall={9}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
        <Column xsmall={4}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
        <Column xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
    </Container>
  </Box>
</LayoutProvider>

Offsets

<LayoutProvider>
  <Box paddingVertical={16}>
    <Container>
      <Row>
        <Column offsetXsmall={2} xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
      <Row>
        <Column offsetXsmall={4} xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
      <Row>
        <Column offsetXsmall={6} xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
    </Container>
  </Box>
</LayoutProvider>

<LayoutProvider>
  <Box paddingVertical={16}>
    <Container>
      <Row>
        <Column offsetXsmall={2} xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
      <Row>
        <Column offsetXsmall={4} xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
      <Row>
        <Column offsetXsmall={6} xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
    </Container>
  </Box>
</LayoutProvider>

Without gutter

<LayoutProvider>
  <Box paddingVertical={16}>
    <Container>
      <Row hasGutter={false}>
        <Column xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
        <Column xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
    </Container>
  </Box>
</LayoutProvider>

<LayoutProvider>
  <Box paddingVertical={16}>
    <Container>
      <Row hasGutter={false}>
        <Column xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
        <Column xsmall={6}>
          <Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
        </Column>
      </Row>
    </Container>
  </Box>
</LayoutProvider>

Row Props

hasGutter

Boolean | undefined

true

children

Reactnode

style

Style<rowprops, viewstyle>

Row Customization

Using getStyles prop

RowStyles {
  rowStyle: ViewStyle;
}
getStyles={(RowProps, Theme) => RowStyles}

Markup

<View rowStyle />

Column Props

children

Reactnode

style

Style<columnprops, viewstyle>

offsetXsmall

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

offsetSmall

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

offsetMedium

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

offsetLarge

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

offsetXlarge

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

xsmall

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

small

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

medium

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

large

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

xlarge

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | undefined

Column Customization

Using getStyles prop

ColumnStyles {
  columnStyle: ViewStyle;
}
getStyles={(ColumnProps, Theme) => ColumnStyles}

Markup

<View columnStyle />

Row and Column

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage

Column wrapping

Offsets

Without gutter

Row Props

Row Customization

Column Props

Column Customization

Usage