Block inner spacings
Spacings between blocks (columns and grids) can be set using simple classes.
Last updated
Spacings between blocks (columns and grids) can be set using simple classes.
Last updated
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.
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
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.
.zen-cms-gx-* classes can be used to set horizontal spacings.
| CSS class | horizontal spacing |
|---|---|
. | 0 |
. | XS |
. | SM |
. | MD |
. | LG |
. | XL |
Example:
.zen-cms-gy-* classes can be used to set vertical spacings.
| CSS class | vertcial spacing |
|---|---|
. | 0 |
. | XS |
. | SM |
. | MD |
. | LG |
. | XL |
Example:
.zen-cms-g-* classes can be used to set horizontal and vertical spacings simultaneously.
| CSS class | Spacing |
|---|---|
. | 0 |
. | XS |
. | SM |
. | MD |
. | LG |
. | XL |
Example:
