Documentation
Components
Grid

Grid

Grid system used to create complex layouts.

Rows

Container

Container

Code Editor
<Container>
  <BlueContainer>
    <Text size="small">Container</Text>
  </BlueContainer>
  <BlueContainer>
    <Text size="small">Container</Text>
  </BlueContainer>
</Container>

Columns

Container

Container

Container

Code Editor
<Container row>
  <BlueContainer>
    <Text size="small">Container</Text>
  </BlueContainer>
  <BlueContainer>
    <Text size="small">Container</Text>
  </BlueContainer>
  <BlueContainer>
    <Text size="small">Container</Text>
  </BlueContainer>
</Container>

Flexboxes

Flex = 1

Flex = 2

Flex = 3

Flex = 4

Code Editor
<Container row>
  <BlueContainer flex={1}>
    <Text size="small">Flex = 1</Text>
  </BlueContainer>
  <BlueContainer flex={2}>
    <Text size="small">Flex = 2</Text>
  </BlueContainer>
  <BlueContainer flex={3}>
    <Text size="small">Flex = 3</Text>
  </BlueContainer>
  <BlueContainer flex={4}>
    <Text size="small">Flex = 4</Text>
  </BlueContainer>
</Container>

Mix

Container

Container

Container

Container

Code Editor
<Container row>
  <BlueContainer>
    <Text size={"small"}>Container</Text>
  </BlueContainer>
  <BlueContainer flex={2}>
    <Text size={"small"}>Container</Text>
  </BlueContainer>
  <Container flex={3}>
    <BlueContainer>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
    <BlueContainer>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
  </Container>
</Container>

Alignments

Container

Container

Container

Container

Container

Container

Container

Container

Code Editor
<Container>
  <Container row>
    <BlueContainer flex={2} style={{ height: 100 }}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
    <BlueContainer style={{ alignSelf: "flex-start" }}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
    <BlueContainer style={{ alignSelf: "center" }}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
    <BlueContainer style={{ alignSelf: "flex-end" }}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
  </Container>
  <Container>
    <BlueContainer align={"center"}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
    <BlueContainer style={{ alignSelf: "flex-start" }}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
    <BlueContainer style={{ alignSelf: "center" }}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
    <BlueContainer style={{ alignSelf: "flex-end" }}>
      <Text size={"small"}>Container</Text>
    </BlueContainer>
  </Container>
</Container>

Responsive

Container 1

Container 2

Code Editor
<Container row direction={["column", "row", "column"]}>
  <BlueContainer>
    <Text size={"small"}>Container 1</Text>
  </BlueContainer>
  <BlueContainer>
    <Text size={"small"}>Container 2</Text>
  </BlueContainer>
</Container>

Gaps

Container 1

Container 2

Container 3

Container 4

Code Editor
<Container row gap={10}>
  <BlueContainer>
    <Text size={"small"}>Container 1</Text>
  </BlueContainer>
  <BlueContainer>
    <Text size={"small"}>Container 2</Text>
  </BlueContainer>
  <Container gap={20}>
    <BlueContainer>
      <Text size={"small"}>Container 3</Text>
    </BlueContainer>
    <BlueContainer>
      <Text size={"small"}>Container 4</Text>
    </BlueContainer>
  </Container>
</Container>
Last updated on
ErrorIcon