Containers

.container applies width: 100%, inline padding, and margin-inline: auto to create a centered, gutter-padded wrapper. Containers can be nested, though most layouts require only one.

Available containers

Container classes differ only in when max-width takes effect:

• .container — applies a max-width at each breakpoint
• .container.{breakpoint} — width: 100% until the named breakpoint, then applies max-width for that breakpoint and wider
• .container.fluid — width: 100% at all breakpoints; no max-width cap

Default container

.container is full-width below the small breakpoint and gains a fixed max-width at each wider breakpoint.

<div class="container">
  ...
</div>

Responsive containers

Each responsive variant is width: 100% below its named breakpoint, then applies max-width for that breakpoint and wider. For example, .container.small is full-width below the small breakpoint and scales up through medium, large, xlarge, and 2xlarge. See Breakpoints for the pixel values at each breakpoint.

<div class="container small">...</div>
<div class="container medium">...</div>
<div class="container large">...</div>
<div class="container xlarge">...</div>
<div class="container 2xlarge">...</div>

Fluid containers

.container.fluid is width: 100% at every breakpoint with no max-width cap.

<div class="container fluid">
  ...
</div>

CSS

The Container system can be customized through Sass variables at compile time.

Container classes are generated from $container-max-widths and can be disabled by setting $enable-container-classes: false.

Sass maps

Override $container-max-widths before importing Chassis CSS to change the max-width at each breakpoint.

$container-max-widths: (
  small:        $container-small,
  medium:       $container-medium,
  large:        $container-large,
  xlarge:       $container-xlarge,
  2xlarge:      $container-2xlarge
);

Design tokens

The Container system consumes design tokens from Chassis Tokens with the $cx- prefix. — See thedesign tokens page.

$container-2xlarge:       $cx-grid-container-2xlarge;
$container-xlarge:        $cx-grid-container-xlarge;
$container-large:         $cx-grid-container-large;
$container-medium:        $cx-grid-container-medium;
$container-small:         $cx-grid-container-small;

Sass mixins

make-container() applies the same base styles as .container — width: 100%, inline padding from $container-padding-x, and centered margins — without the breakpoint max-width overrides.

/// Generate a full-width, horizontally-centered container with configurable gutters.
///
/// @param {Number} $gutter [$container-padding-x] - Horizontal gutter (applied as left and right padding)
@mixin make-container($gutter: $container-padding-x) {
  --gutter-x: #{$gutter};
  --gutter-y: 0;
  width: 100%;
  padding-inline: calc(var(--gutter-x) * .5);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

Apply it in a custom selector to build a container without using the .container class:

.custom-container {
  @include make-container();
}