Grid & Layout

The 📁 base/_grid-layout.scss file contains a set of utility classes related to positioning and layout rules.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

container Class #

The .container class is used to set the width of the content and center it horizontally.

.container {
  width: calc(100% - 2*var(--component-padding));
  margin-left: auto;
  margin-right: auto;
}

The reason why we subtract the --component-padding variable from the .container width is to ensure the content is always aligned at the edges of the page.

Here's an example of how to align the content of a component if 1) there's no background color specified, 2) there's a full-width background-color and 3) there's a background color:

_

max-width Classes #

The .max-width-{size} classes can be used to set the max-width of an element:

Class	Description
`.max-width-xxxxs`	set max-width equal to 20rem (~320px)
`.max-width-xxxs`	set max-width equal to 26rem (~416px)
`.max-width-xxs`	set max-width equal to 32rem (~512px)
`.max-width-xs`	set max-width equal to 38rem (~608px)
`.max-width-sm`	set max-width equal to 48rem (~768px)
`.max-width-md`	set max-width equal to 64rem (~1024px)
`.max-width-lg`	set max-width equal to 80rem (~1280px)
`.max-width-xl`	set max-width equal to 90rem (~1440px)
`.max-width-xxl`	set max-width equal to 100rem (~1600px)
`.max-width-xxxl`	set max-width equal to 120rem (~1920px)
`.max-width-xxxxl`	set max-width equal to 150rem (~2400px)

If you want to have different max-widths at different breakpoints, you can use one of the .max-width-adaptive-{size} classes (example):

Class	Description
`.max-width-adaptive-sm`	set max-width equal to 48rem (~768px) at breakpoint md
`.max-width-adaptive-md`	set max-width equal to 64rem (~1024px) at breakpoint md
`.max-width-adaptive-lg`	set max-width equal to 64rem (~1024px) at breakpoint md and to 80rem (~1280px) at breakpoint xl
`.max-width-adaptive-xl`	set max-width equal to 64rem (~1024px) at breakpoint md and to 90rem (~1440px) at breakpoint xl

Flexbox Grid System #

The framework includes a set of utility classes (based on Flexbox) that can be used to create responsive grids: the .grid class is used to target the grid container, then the .col-{number} classes are applied to the grid items to set the number of columns occupied (based on a 12 columns system).

The .grid-gap-{size} classes are used to set the gap (default gap is zero):

Class	Description
`.grid-gap-xxxxs`	set gap equal to var(--space-xxxxs)
`.grid-gap-xxxs`	set gap equal to var(--space-xxxs)
`.grid-gap-xxs`	set gap equal to var(--space-xxs)
`.grid-gap-xs`	set gap equal to var(--space-xs)
`.grid-gap-sm`	set gap equal to var(--space-sm)
`.grid-gap-md`	set gap equal to var(--space-md)
`.grid-gap-lg`	set gap equal to var(--space-lg)
`.grid-gap-xl`	set gap equal to var(--space-xl)
`.grid-gap-xxl`	set gap equal to var(--space-xxl)
`.grid-gap-xxxl`	set gap equal to var(--space-xxxl)
`.grid-gap-xxxxl`	set gap equal to var(--space-xxxxl)

If you want to automatically adjust the width of your grid items so that they all have equal widths, you can use the .col class.

Here's an example of how to use the grid utility classes:

_

You can use the .col-{number}@{breakpoint} (and the [email protected]{breakpoint}) variations if you need to modify the width of an element at a specific media query:

_

CSS Grid System #

If you prefer to use CSS Grid to create your grid system, then you can use the gridFallback and the column mixins if you wish to provide a fallback for browsers not supporting CSS Grid.

Here's an example of how to use CSS Grid together with our mixins to create a responsive layout:

_

In the example above (SCSS tab), we use a @support feature query to set the grid settings. The mixin fallback needs to be included before the grid settings, and you can optionally pass the gap value to the mixin.

The grid items only need a span value for the grid-column property. The span value is equal to the number of columns you want the item to stretch. The fallback mixin of the grid items accepts a fraction, or a percentage value, as the argument.

Note: if you're not supporting older browsers (i.e. IE), you can just use the grid properties and forget about the fallbacks. You lucky friend!