Block inner spacings
Spacings between blocks (columns and grids) can be set using simple classes.
Spacings (Gutters, gaps)
Gutters are the paddings between blocks used to place and align elements in the shopping experience.
The Grid gap (1) field can be used to define an inner distance (2, 3) between the individual blocks in a layout or column grid.
You will only find this setting for Zenit column and layout elements.
Advanced spacings (Gutters, gaps)
Gutters are the paddings between blocks used to place and align elements in the shopping experience.
These spacings settings in the layout usually apply to all end devices. There are special classes to set these distances responsively - i.e. for different devices from smartphones to desktop devices. To do this, use breakpoint-specific classes to change horizontal spacing, vertical spacing, or all spacing.
To do this, the Inner Grid gap field should not contain a value.
A complete list of all classes can be found below. You can also derive them according to the following scheme:
.zen-cms-g{Achse}-{Viewport}-{Größe}
Example: zen-cms-gx-sm-1 = horizontal distance from small devices in size 1
Set up
Choose a Block (3) which should receive the CSS class for the spacing and enter one or more CSS class names in the CSS classes (4) field.
The class names are entered without dot notation. Multiple CSS class names are entered separated by spaces.
Horizontal spacings (x-axis)
.zen-cms-gx-* classes can be used to set horizontal spacings.
| CSS class | horizontal spacing |
|---|---|
. | 0 |
. | XS |
. | SM |
. | MD |
. | LG |
. | XL |
Example:
Vertical spacings (y-axis)
.zen-cms-gy-* classes can be used to set vertical spacings.
| CSS class | vertcial spacing |
|---|---|
. | 0 |
. | XS |
. | SM |
. | MD |
. | LG |
. | XL |
Example:
Horizontal & vertical spacings
.zen-cms-g-* classes can be used to set horizontal and vertical spacings simultaneously.
| CSS class | Spacing |
|---|---|
. | 0 |
. | XS |
. | SM |
. | MD |
. | LG |
. | XL |
Example:
Last updated
