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

Variations

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

Technical Details

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

Resources