Grid

Grid system used to create complex layouts.

Rows

Container

Code Editor

<Container>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>
</Container>

<Container>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>
</Container>

Columns

Container

Code Editor

<Container row>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>
</Container>

<Container row>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>
</Container>

Flexboxes

Flex = 1

Flex = 2

Flex = 3

50px

Code Editor

<Container row>
  <BlueContainer flex={1}>
    <Text small>Flex = 1</Text>
  </BlueContainer>

  <BlueContainer flex={2}>
    <Text small>Flex = 2</Text>
  </BlueContainer>

  <BlueContainer flex={3}>
    <Text small>Flex = 3</Text>
  </BlueContainer>

  <BlueContainer flex="0 0 50px">
    <Text small>50px</Text>
  </BlueContainer>
</Container>

<Container row>
  <BlueContainer flex={1}>
    <Text small>Flex = 1</Text>
  </BlueContainer>

  <BlueContainer flex={2}>
    <Text small>Flex = 2</Text>
  </BlueContainer>

  <BlueContainer flex={3}>
    <Text small>Flex = 3</Text>
  </BlueContainer>

  <BlueContainer flex="0 0 50px">
    <Text small>50px</Text>
  </BlueContainer>
</Container>

Mix

Container

Code Editor

<Container row>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer flex={2}>
    <Text small>Container</Text>
  </BlueContainer>

  <Container flex={3}>
    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>
</Container>

<Container row>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer flex={2}>
    <Text small>Container</Text>
  </BlueContainer>

  <Container flex={3}>
    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>
</Container>

Alignments

Container

Code Editor

<Container>
  <Container row>
    <BlueContainer flex={2} style={{ height: 100 }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-start' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'center' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-end' }}>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>

  <Container>
    <BlueContainer center>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-start' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'center' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-end' }}>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>
</Container>

<Container>
  <Container row>
    <BlueContainer flex={2} style={{ height: 100 }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-start' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'center' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-end' }}>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>

  <Container>
    <BlueContainer center>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-start' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'center' }}>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer style={{ alignSelf: 'flex-end' }}>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>
</Container>

Responsive

Left

Right

Code Editor

<Container direction={['column', 'column', 'row']}>
  <BlueContainer>
    <Text small>Left</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Right</Text>
  </BlueContainer>
</Container>

<Container direction={['column', 'column', 'row']}>
  <BlueContainer>
    <Text small>Left</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Right</Text>
  </BlueContainer>
</Container>

Gaps

Container

Code Editor

<Container row gap={0.5}>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <Container gap={2}>
    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>
</Container>

<Container row gap={0.5}>
  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <BlueContainer>
    <Text small>Container</Text>
  </BlueContainer>

  <Container gap={2}>
    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>

    <BlueContainer>
      <Text small>Container</Text>
    </BlueContainer>
  </Container>
</Container>