.container

.container--narrow

@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;
  }
}

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

Container

Variations

default: uses the container-inline-size value for width from the $layout map.
--narrow: uses 50rem container width.

Technical Details

You only need to modify the --inline-size variable to add new variations.
The --gap variable (that controls the inline margin) uses the clamp function to make it more dynamic.