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>