The container is the most generic element of our layout. With this snippet, you can manage multiple-width containers.

Variations

  • default: uses the $container-width value width.
  • --wide: uses 100% container width.
  • --narrow: uses 50rem container width.

Technical Details

  • For the default width, it uses the $container-width variable.
  • It uses local, scoped CSS custom properties with the set-css-variable mixin and get-css-variable function.
  • You only need to modify the --container-width variable to add new variations.
  • The --container-gap (that controls the inline margin) variable uses the clamp function to make it a little more dynamic.

Resources