Containers

Responsive content container utilities that can be customized using CSS variables inline.

Examples

Use the .container utility with no pre-defined size values to create custom containers inline.

.container, .container-xl, .container-lg, .container-md, .container-sm, .container-xs {
  inline-size: 100%;
  max-inline-size: var(--size);
  margin-inline: var(--mx, auto);
  padding-inline: var(--px);
}

.container-xl {
  --size: 1600px;
}

.container-lg {
  --size: 1280px;
}

.container-md {
  --size: 1024px;
}

.container-sm {
  --size: 768px;
}

.container-xs {
  --size: 480px;
}

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.

custom.scss

@use "sassmods/scss/sassmods" as *;
@include containers-css;

Source

_containers.scss

// ---------------------------------------------------------- 
// Containers
// ----------------------------------------------------------
$container-xl:  1600px !default;
$container-lg:  1280px !default;
$container-md:  1024px !default;
$container-sm:  768px !default;
$container-xs:  480px !default;

@mixin containers-css {

.container, .container-xl, .container-lg, .container-md, .container-sm, .container-xs {
  inline-size: 100%;
  max-inline-size: var(--size);
  margin-inline: var(--mx, auto);
  padding-inline: var(--px);
}

.container-xl {
  --size: #{$container-xl};
}

.container-lg {
  --size: #{$container-lg};
}

.container-md {
  --size: #{$container-md};
}

.container-sm {
  --size: #{$container-sm};
}

.container-xs {
  --size: #{$container-xs};
}

} // end containers-css