Layout

Declarative layout and common spacing props.

Layout components

Box, Flex and Grid are foundational elements you'll use to construct layouts. Box provides block-level spacing and sizing, while Flex and Grid let you create flexible columns, rows and grids.

<Grid columns="3" gap="3">
  <Flex direction="column" gap="3">
    <Box height="5">
      <DecorativeBox />
    </Box>
    <Box height="7">
      <DecorativeBox />
    </Box>
    <Box height="9">
      <DecorativeBox />
    </Box>
  </Flex>

  <Flex direction="column" gap="3">
    <Box grow="1">
      <DecorativeBox />
    </Box>
    <Box height="6">
      <DecorativeBox />
    </Box>
  </Flex>
</Grid>

Container and Section are used for page level layout and allow you to contain the max width of content or apply consistent vertical spacing between sections.

All layout components share a common set of props:

Margin props

Shorthand utilities for applying margin to any side of an element, useful when you need to apply space between elements. Margin props are available on components that render a node.

<Button mr="3" variant="soft">Cancel</Button>
<Button>Save changes</Button>

Spacing scale

Spacing values are derived from a 9 step scale.

Scaling

Values which affect layout (spacing, typographic sizing, line heights) scale relatively based on the scaling value defined in your Theme. This setting allows you to scale the UI density uniformly across your entire application.