Container

The container() function returns a width in pixels, equal to the number of columns specified relative to a 12 column grid.

This can be very useful to create constrained containers for content within the page.

Usage

Container Function

import { container } from '@sky-uk/ui-core';

container(6);

// returns '636px'

You can return the containers without a px suffix by passing false as a second argument. This is useful if you need to use the raw number for calculations.

container('md', false);

// returns 640

Use in layouts

We often encounter designs where content doesn't fill the entire 12 columns available:

We can use container() as a shorthand to achieve these layouts:

<>
  <Box
    $marginBottom={5}
    $marginX="auto"
    $maxWidth={container(10)}
    $paddingX={{xs: 4, lg: 5}}
  >
    <Card $aspectRatio="10 / 1" />
  </Box>

  <Box $marginX="auto" $maxWidth={container(6)} $paddingX={{xs: 4, lg: 5}}>
    <Grid $gridTemplateColumns="1fr 1fr" $gap={5}>
      <Card $aspectRatio="3 / 1" />
      <Card $aspectRatio="3 / 1" />
    </Grid>
  </Box>
</>

Container (component)

The Container component is a shorthand for the above approach using Box which can be used instead. See the Container component page for more information.

<>
  <Container $size="10-col" $marginBottom={5} $paddingX={{xs: 4, lg: 5}}>
    <Card $aspectRatio="10 / 1" />
  </Container>

  <Container $size="6-col" $paddingX={{xs: 4, lg: 5}}>
    <Grid $gridTemplateColumns="1fr 1fr" $gap={5}>
      <Card $aspectRatio="3 / 1" />
      <Card $aspectRatio="3 / 1" />
    </Grid>
  </Container>
</>

Further Reading

• Box component documentation
• Container component documentation
• Layout guide