Container

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 referenceLink to this section

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:

Basic usageLink to this section

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

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 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 bandLink to this section

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.

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 utilitiesLink to this section

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:

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 edgeLink to this section

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.

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 variantsLink to this section

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

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.

CustomizingLink to this section

--container-width and --container-margin come from container.width and container.margin in the responsiveSizing collection (see Spacing and sizing). With the default tokens the container margin equals the grid margin, so the container and the layout grid line up. Override them per breakpoint with customTokens.responsiveSizing, for example to give a wide breakpoint its own width:

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. blocks.container: false removes the *-container utilities; the container class stays.

RelatedLink to this section

• Grid
• Section spacing
• Figure width
• Section