Grid

Grid system used to create complex layouts.

Rows

Code Editor
<Container>

  <BlueContainer>

    <Text small>Container</Text>

  </BlueContainer>



  <BlueContainer>

    <Text small>Container</Text>

  </BlueContainer>

</Container>

Columns

Code Editor
<Container row>

  <BlueContainer>

    <Text small>Container</Text>

  </BlueContainer>



  <BlueContainer>

    <Text small>Container</Text>

  </BlueContainer>



  <BlueContainer>

    <Text small>Container</Text>

  </BlueContainer>

</Container>

Flexboxes

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>

Mix

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>

Alignments

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>

Responsive

Code Editor
<Container direction={['column', 'column', 'row']}>

  <BlueContainer>

    <Text small>Left</Text>

  </BlueContainer>



  <BlueContainer>

    <Text small>Right</Text>

  </BlueContainer>

</Container>

Gaps

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>