.container

.container--narrow

.container--wide

.container--full

@use 'sprucecss/scss/spruce' as *;

.container {
  --inline-size: #{config('container-inline-size', $layout, false)};
  --gap: #{spacer-clamp('m', 'l')};

  @include layout-center(
    var(--gap),
    var(--inline-size)
  );

  &--narrow {
    --inline-size: 50rem;
  }

  &--wide {
    --inline-size: 110rem;
  }

  &--full {
    --inline-size: none;
  }
}

<div class="container">
    <div class="bit">.container</div>
</div>
<div class="container container--narrow">
    <div class="bit">.container--narrow</div>
</div>
<div class="container container--wide">
    <div class="bit">.container--wide</div>
</div>
<div class="container container--full">
    <div class="bit">.container--full</div>
</div>

Container

Variations

Class	Width
`.container`	`container-inline-size` from the `$layout` map (84rem by default).
`.container--narrow`	50rem, for reading content like articles and forms.
`.container--wide`	110rem, for dashboards and wide galleries.
`.container--full`	No maximum width, only the side gap.

Technical Details

It uses the layout-center mixin: inline-size: 100%, margin-inline: auto, a maximum inline-size and a padding-inline gap. Every property is logical, so it works in RTL.
Add a variation by changing the --inline-size custom property, for example .container--article { --inline-size: 42rem; }, or set it inline for a one-off.
The --gap custom property controls the side padding; its default is fluid (spacer-clamp('m', 'l')), so it grows with the viewport.
In the blocks, the container always sits between the block and its inner element: .block-name > .container > .block-name__inner.

Customization

@use 'sprucecss/scss/spruce' with (
  $layout: (
    'container-inline-size': 76rem,
  ),
);

Documentation

Learn about Spruce CSS through our extensive documentation.

Components

Explore our UI library of accessible components built with Spruce CSS.

Blocks and Pages

Full-width page blocks and complete page templates, ready to copy.

Explore