4.1 layouts.layout-center Layout Center
All other layouts should be nested inside this centered layout to ensure that content does not get too wide on very large screens.
Applying a .layout-* class to the same HTML element as .layout-center
would cause that element's grid to mis-align with the rest of the grid on the
page, but this component will automatically detect the other .layout-*
class and automatically use the .layout-center--shared-grid variant
instead.
Examples
Default styling
This is layout center that has content is centered on larger screens.
.layout-center--shared-grid
If
.layout-center is applied to the same div as another .layout- class, then this variant should be used to prevent the shared layout's grid from mis-aligning. Note: Each time a new .layout- component is created, this component will need to be modified.
This is layout center that has content is centered on larger screens.
Markup: layouts/layout-center/layout-center.twig
<div class="layout-center {{modifier_class}}">
This is layout center that has content is centered on larger screens.
</div>
Source:
layouts/layout-center/_layout-center.scss, line 5