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>