---
title: "Container"
description: "Center content at the token container width with container, and align anything else to it with the *-container utilities."
requested_language: nl
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/nl/styling/container
version: unreleased (main)
docs_index: https://docs.systhema.app/nl/llms.txt
---
> This page isn't translated yet. Showing English.


`container` centers a block at the token container width with the token margin on each side. The `*-container` utilities apply the same width or margin to a single property, so a full-bleed band, a background or an absolutely positioned element can line up with the content above and below it.

## Quick reference

The `container` class itself sets `width: calc(100% - var(--container-margin) * 2)`, `max-width: var(--container-width)` and `margin-inline: auto`. It is part of Systhema's base styles, so it is always present; Tailwind's own `container` utility is switched off. The other classes:

<!-- generated:utilities container -->

| Class                    | Styles                                                                                |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `w-container`            | `width: var(--container-width);`                                                      |
| `max-w-container`        | `max-width: var(--container-width);`                                                  |
| `min-w-container`        | `min-width: var(--container-width);`                                                  |
| `w-container-margin`     | `width: var(--container-margin);`                                                     |
| `max-w-container-margin` | `max-width: var(--container-margin);`                                                 |
| `min-w-container-margin` | `min-width: var(--container-margin);`                                                 |
| `mx-container`           | `margin-left: var(--container-margin);`<br>`margin-right: var(--container-margin);`   |
| `ml-container`           | `margin-left: var(--container-margin);`                                               |
| `mr-container`           | `margin-right: var(--container-margin);`                                              |
| `px-container`           | `padding-left: var(--container-margin);`<br>`padding-right: var(--container-margin);` |
| `pl-container`           | `padding-left: var(--container-margin);`                                              |
| `pr-container`           | `padding-right: var(--container-margin);`                                             |
| `left-container`         | `left: var(--container-margin);`                                                      |
| `left-container-mx`      | `left: var(--container-margin);`                                                      |
| `left-container-px`      | `left: var(--container-margin);`                                                      |
| `left-container-margin`  | `left: var(--container-margin);`                                                      |
| `right-container`        | `right: var(--container-margin);`                                                     |
| `right-container-mx`     | `right: var(--container-margin);`                                                     |
| `right-container-px`     | `right: var(--container-margin);`                                                     |
| `right-container-margin` | `right: var(--container-margin);`                                                     |

<!-- /generated -->

## Basic usage

Wrap content in `container` to center it at the container width. The hatched strips are the container margin.

```tsx preview iframe bleed height=200 title="container"
const hatch =
  'bg-[repeating-linear-gradient(315deg,var(--color-foundations-line-muted)_0_1px,transparent_0_50%)] bg-size-[10px_10px]'

export default function Demo() {
  return (
    <div className={`w-full py-8 ${hatch}`}>
      <div className="container">
        <div className="bg-theme-500 grid h-24 place-items-center rounded-lg font-mono text-sm text-white">
          container
        </div>
      </div>
    </div>
  )
}
```

[`Section`](https://docs.systhema.app/nl/components/section.md) renders `grid-default container` for you, so content inside a section is already on the container. Reach for the class directly in a layout or component of your own.

### Aligning a full-bleed band

`px-container` pads an element by the container margin on both sides. Use it on a band whose background runs edge to edge while its content lines up with the container. `pl-container` and `pr-container` pad one side.

```tsx preview iframe bleed height=260 title="px-container"
const hatch =
  'bg-[repeating-linear-gradient(315deg,var(--color-foundations-line-muted)_0_1px,transparent_0_50%)] bg-size-[10px_10px]'

export default function Demo() {
  return (
    <div className="flex w-full flex-col gap-4 py-8">
      <div className="container">
        <div className="bg-theme-500 grid h-16 place-items-center rounded-lg font-mono text-sm text-white">
          container
        </div>
      </div>
      <div className={`px-container ${hatch}`}>
        <div className="bg-theme-700 grid h-16 place-items-center rounded-lg font-mono text-sm text-white">
          px-container
        </div>
      </div>
    </div>
  )
}
```

`mx-container`, `ml-container` and `mr-container` do the same with margins.

The two edges match as long as the viewport is no wider than the container width plus both margins. Beyond that, `container` stops growing and centers itself, while `px-container` keeps the token margin. With a fluid spacing rule (the Payload template's default) the container scales with the viewport and the edges always match.

### Width utilities

`w-container`, `max-w-container` and `min-w-container` set a width to the container width; the `-margin` variants (`w-container-margin` and the others) set it to one container margin. Use `max-w-container` to cap an element that is not inside a `container`:

```tsx preview iframe bleed height=180 title="max-w-container"
export default function Demo() {
  return (
    <div className="w-full py-8">
      <div className="bg-theme-500 mx-auto grid h-16 max-w-container place-items-center rounded-lg font-mono text-sm text-white">
        max-w-container mx-auto
      </div>
    </div>
  )
}
```

Unlike `container`, `max-w-container` does not subtract the margins, so on a narrow viewport the element runs to the screen edges.

### Positioning against the container edge

`left-container` and `right-container` set `left` or `right` to the container margin. Use them to pin an absolutely positioned element, such as a badge or a slider arrow, to the content edge of a full-width band. `left-container-mx`, `left-container-px` and `left-container-margin` are aliases of `left-container`, and the same goes for `right-container`.

```tsx preview iframe bleed height=200 title="left-container and right-container"
const hatch =
  'bg-[repeating-linear-gradient(315deg,var(--color-foundations-line-muted)_0_1px,transparent_0_50%)] bg-size-[10px_10px]'

export default function Demo() {
  return (
    <div className={`relative h-32 w-full ${hatch}`}>
      <span className="bg-theme-500 absolute top-6 left-container rounded-md px-3 py-1 font-mono text-xs text-white">
        left-container
      </span>
      <span className="bg-theme-700 absolute right-container bottom-6 rounded-md px-3 py-1 font-mono text-xs text-white">
        right-container
      </span>
    </div>
  )
}
```

## Responsive and state variants

The width and margin are `responsiveSizing` tokens, so they change per breakpoint without a prefix. With the default tokens:

| Breakpoint | `--container-width` | `--container-margin` |
| ---------- | ------------------- | -------------------- |
| `sm`       | 356px               | 17px                 |
| `md`       | 708px               | 30px                 |
| `lg`       | 1036px              | 78px                 |

Switch the previews above between device widths to see the margin change. To apply a utility only from a breakpoint up, prefix it: `md:px-container` pads a band from `md` and leaves it flush on phones.

## Customizing

`--container-width` and `--container-margin` come from `container.width` and `container.margin` in the `responsiveSizing` collection (see [Spacing and sizing](https://docs.systhema.app/nl/reference/tokens/spacing.md#container)). With the default tokens the container margin equals the grid margin, so the container and the [layout grid](https://docs.systhema.app/nl/styling/grid.md) line up. Override them per breakpoint with `customTokens.responsiveSizing`, for example to give a wide breakpoint its own width:

```ts title="systhema.config.ts"
const config: SysthemaConfig = {
  customTokens: {
    responsiveSizing: {
      xl: {
        container: { width: '1156px', margin: '{grid.default.margin}' },
      },
    },
  },
}
```

`xl`, `2xl` and `3xl` have no sizing tokens by default and keep the `lg` values until you define them; with a fluid spacing rule you need to define them, see [The fluid cap](https://docs.systhema.app/nl/concepts/responsive-sizing.md#the-fluid-cap). `blocks.container: false` removes the `*-container` utilities; the `container` class stays.

## Related

- [Grid](https://docs.systhema.app/nl/styling/grid.md)
- [Section spacing](https://docs.systhema.app/nl/styling/section-spacing.md)
- [Figure width](https://docs.systhema.app/nl/styling/figure-width.md)
- [Section](https://docs.systhema.app/nl/components/section.md)