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.

🔍 On this page:

1. Container
2. Max-width
3. Flexbox Grid System (.col)
4. CSS Grid System
5. Examples

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:

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

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):

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!

Examples #

Grid examples.

Distribution #

Use the Flexbox utility classes to edit columns distribution:

Reverse order #

Reverse the order of two columns at a specific breakpoint.

Column breaks #

How to break columns to a new line:

Holy grail #

Basic page layout: