---
title: "Foundations — Container"
canonical: https://sky-ui.cf.sky.com/foundations/containers
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Foundations — Container

Container provides a width based on the given column count, accounting for outer gutters.

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

**Note:** The width is calculated by multiplying the number of columns by the width of a single column, which is 84px, and adding the outer gutters (21px on each side).

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

| Key | Value |
| --- | --- |
| 0 | 0px |
| 1 | 126px |
| 2 | 228px |
| 3 | 330px |
| 4 | 432px |
| 5 | 534px |
| 6 | 636px |
| 7 | 738px |
| 8 | 840px |
| 9 | 942px |
| 10 | 1044px |
| 11 | 1146px |
| 12 | 1248px |

## Usage

### Container Function

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

container(6);

// returns '636px'
```

**Warning:** `container()` widths should never be used to layout content horizontally and should only be used to constrain.

---

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.

```js
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:

```tsx-mid
<>
  <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](/components/container/) for more information.

```tsx-mid
<>
  <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>
</>
```

**Important:** The `Container` and `container()` values assume that content will have the standard `{{xs: 4, lg: 5}}` padding applied and accounts for this within its width. If the gutter padding is not applied, the content will not align with the Grid. For more information see the [Layout guide page](/guides/layout).

## Further Reading
* Box component documentation
* Container component documentation
* Layout guide

---