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

# Components — Container

The Container component can constrain the size of the content based on the Sky grid system.

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

---

The `Container` component can be used to constrain the size of content. it can be passed a `size` prop with one of the following values:

- `12-col` - 12 Columns (default)
- `10-col` - 10 Columns
- `8-col` - 8 Columns
- `6-col` - 6 Columns
- `4-col` - 4 Columns

---

```jsx
<Container $paddingX={{ xs: 4, md: 5 }} $size="8-col">
  Content Goes Here
</Container>
```

**Important:** The `Container` should only be used as an outermost wrapper to constrain content, it should not be
  used to build out complex grid layouts. If you need to build multicolumn layouts use
  [Grid](/components/grid/).

---

## System Modifiers

The `Container` component also accepts props applied using the following system modifiers:

- [display](/core/system/display/)
- [flex-parent](/core/system/flex-parent/)
- [margin](/core/system/margin/)
- [padding](/core/system/padding/)