The container class is deprecated and will be removed in a future version of Boilerplate. Instead of container, use .grid with .grid__container or the mixin.
The container class has been updated to use the responsive $gap sizes so it will correctly match how .grid__container looks across all breakpoints.
<div class="container">
<p>
This is using the deprecated .container utility class.
</p>
<p>Lorem consectetur porro saepe alias quo. Iure fugiat illo magnam velit sapiente esse? Dicta adipisci illum nisi perspiciatis eligendi! Assumenda sequi aliquam dignissimos dolore nesciunt animi. Laboriosam ad ad nam.</p>
</div>
<div class="grid">
<div class="grid__container">
<p>
This is using the preferred alternative, using .grid__container within a .grid element. You can use the grid mixin on your own elements if you'd rather not use a .grid class.
</p>
<p>Lorem consectetur porro saepe alias quo. Iure fugiat illo magnam velit sapiente esse? Dicta adipisci illum nisi perspiciatis eligendi! Assumenda sequi aliquam dignissimos dolore nesciunt animi. Laboriosam ad ad nam.</p>
</div>
</div>
@use "sass:map";
@use "/resources/styles/config";
@use "/resources/styles/common" as *;
.container {
margin-left: auto;
margin-right: auto;
padding-left: #{map.get(config.$breakpoints, sm, gap)};
padding-right: #{map.get(config.$breakpoints, sm, gap)};
@include at(md) {
max-width: #{map.get(config.$breakpoints, lg, width)};
padding-left: #{map.get(config.$breakpoints, md, gap)};
padding-right: #{map.get(config.$breakpoints, md, gap)};
}
@include at(lg) {
max-width: #{map.get(config.$breakpoints, xl, width)};
padding-left: #{map.get(config.$breakpoints, lg, gap)};
padding-right: #{map.get(config.$breakpoints, lg, gap)};
}
}