Grid

The grid system uses one container and 12 columns to layout and align content. It’s built with CSS Grid and is fully responsive.

The following is a simple overview of all grid classes. A detailed description of the classes can be found in the following chapters.

The structure of the class names are:

• .grid
• .grid--{VERTICAL}-{HORIZONTAL}
• .grid--{VERTICAL}-{HORIZONTAL}-{SCREEN_SIZE}
• .grid--gap-{GAP}
• .grid--gap-{GAP}-{SCREEN_SIZE}
• .grid--gap-row-{GAP}
• .grid--gap-row-{GAP}-{SCREEN_SIZE}
• .grid--gap-col-{GAP}
• .grid--gap-col-{GAP}-{SCREEN_SIZE}
• .grid__item-{ITEM}
• .grid__item-{ITEM}--{SCREEN_SIZE}
• .grid__item--{VERTICAL}-{HORIZONTAL}
• .grid__item--{VERTICAL}-{HORIZONTAL}-{SCREEN_SIZE}
• .grid__item--start-{ITEM}
• .grid__item--start-{ITEM}-{SCREEN_SIZE}
• .grid__item--order-{ITEM}
• .grid__item--order-{ITEM}-{SCREEN_SIZE}

The values are:

• SCREEN_SIZE lg, md, sm, xs
• VERTICAL top, middle, bottom, stretch
• HORIZONTAL start, center, end, stretch
• ITEM 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
• GAP 0.00, 0.25, 0.50, 0.75, 1.00, 1.25, 1.50, 1.75, 2.00

Basic

Basically, as always in BEM, there is one block, several elements and lots of modifiers.

There is one block class .grid.

The grid system uses 12 columns that are spanned across the entire width. You can use the element classes .grid__item-{1..12} to determine in how many columns your content should be displayed.

Modifier

The Grid System can be customized by using class modifiers. The following sub-chapters list all existing classes of grid modifier.

Mobile

In addition, we use our Responsive Design System and its breakpoints to adjust the styles on the other screen sizes.

The standard grid__item-* class must always be set. In addition, you can adjust the number of cols with the modifier classes .grid__item-{1..12}--{lg, md, sm, xs}.

Spacer

With the help of the gap modifier classes (.grid--gap-{0.00, 0.25, 0.50, 0.75, 1.00, 1.25, 1.50, 1.75, 2.00}, .grid--gap-row-{0.00, 0.25, 0.50, 0.75, 1.00, 1.25, 1.50, 1.75, 2.00}, .grid--gap-col-{0.00, 0.25, 0.50, 0.75, 1.00, 1.25, 1.50, 1.75, 2.00}), the space between the columns and rows can be defined. No space is reserved by default.

We also can set gap spacer for different breakpoints (.grid--gap-{0.00, ... 2.00}-{lg, md, sm, xs}, .grid--gap-row-{0.00, ... 2.00}-{lg, md, sm, xs} and .grid--gap-col-{0.00, ... 2.00}-{lg, md, sm, xs}).

Position

By default, the positioning within a col is always the upper left corner. This can be changed for all cols using the positioning modifier class .grid--{top, middle, bottom, stretch}-{start, center, end, stretch}.

By default, the positioning within a col is always the upper left corner. This can be changed for one using the positioning modifier class .grid__item--{top, middle, bottom, stretch}-{start, center, end, stretch}.

The positioning for all cols / one col can set for different breakpoints (.grid--{top, middle, bottom, stretch}-{start, center, end, stretch}-{lg, md, sm, xs}, .grid__item--{top, middle, bottom, stretch}-{start, center, end, stretch}-{lg, md, sm, xs})

Start

This modifier can be used to determine in which column the element should be placed (.grid__item--start-{1..12}, .grid__item--start-{1..12}-{lg, md, sm, xs}). For a more detailed description, see below.

Order

Change the visual order of specific grid items with the order modifier (.grid__item--order-{1..12}, .grid__item--order-{1..12}-{lg, md, sm, xs}).