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 andget-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.