Max Width

• Classes
• Container
• Customize

Classes #

Max-width utility classes:

Responsive - target a specific breakpoint by adding the @{breakpoint} suffix (e.g., .max-width-sm@md).

To set the max-width equal to the current breakpoint, use one of the .max-width-adaptive-{breakpoint} classes (e.g., .max-width-adaptive-md).

<div class="container max-width-adaptive-md">
  <!-- ... -->
</div>

Container #

The .container class is used to center the content horizontally. It subtracts the --container-margin-x variable (on both sides) from the element width. It's often used with the max-width utility classes.

Example:

<div class="container max-width-sm">
  <!-- ... -->
</div>

To customize the container left and right margins, update the value of the $container-margin-x variable in your style.scss file:

@use 'config' as * with (
  $container-margin-x: var(--space-md)
);

That will generate the following CSS in your style.css file:

:root {
  --container-margin-x: var(--space-md);
}

Customize #

To customize the default max-width values, pass the $max-width map to the config module in your style.scss file:

@use 'config' as * with (
  $max-width: (
    '3xs': '20rem',
    '2xs': '26rem',
    'xs': '32rem',
    'sm': '48rem',
    'md': '64rem',
    'lg': '80rem',
    'xl': '90rem'
  )
);