# Block inner spacings

## Spacings (Gutters, gaps)

[Gutters](https://getbootstrap.com/docs/5.1/layout/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.

{% hint style="info" %}
You will only find this setting for Zenit column and layout elements.
{% endhint %}

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FFL9RXuJ37uZ2R79Nc5mS%2Fdocs-en-config-shopping-experiences-block-spacings-field.png?alt=media&#x26;token=7f3d2b12-3d15-431b-9a09-86b66d0ca96c" alt=""><figcaption></figcaption></figure>

## Advanced spacings (Gutters, gaps)

[Gutters](https://getbootstrap.com/docs/5.1/layout/gutters/) are the paddings between blocks used to place and align elements in the shopping experience.&#x20;

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.

{% hint style="info" %}
To do this, the Inner **Grid gap** field should not contain a value.
{% endhint %}

{% hint style="success" %}
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
{% endhint %}

### Set up

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F9Q70XMXIZR7DYCVqiFoj%2Fdocs-en-config-shopping-experiences-block-spacings-classes.png?alt=media\&token=3714ef29-5073-4acf-906d-fd6c42520e6b)

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.

{% hint style="warning" %}
The class names are entered without dot notation. Multiple CSS class names are entered separated by spaces.
{% endhint %}

### Horizontal spacings (x-axis)

`.zen-cms-gx-*` classes can be used to set horizontal spacings.&#x20;

{% tabs %}
{% tab title="All viewports" %}

| CSS class       | horizontal spacing |
| --------------- | ------------------ |
| .`zen-cms-gx-0` | 0                  |
| .`zen-cms-gx-1` | XS                 |
| .`zen-cms-gx-2` | SM                 |
| .`zen-cms-gx-3` | MD                 |
| .`zen-cms-gx-4` | LG                 |
| .`zen-cms-gx-5` | XL                 |
| {% endtab %}    |                    |

{% tab title="SM" %}
SM Viewports (from 576px)

| CSS class          | horizontal spacing |
| ------------------ | ------------------ |
| .`zen-cms-gx-sm-0` | 0                  |
| .`zen-cms-gx-sm-1` | XS                 |
| .`zen-cms-gx-sm-2` | SM                 |
| .`zen-cms-gx-sm-3` | MD                 |
| .`zen-cms-gx-sm-4` | LG                 |
| .`zen-cms-gx-sm-5` | XL                 |
| {% endtab %}       |                    |

{% tab title="MD" %}
MD Viewports (from 768px)

| CSS class          | horizontal spacing |
| ------------------ | ------------------ |
| .`zen-cms-gx-md-0` | 0                  |
| .`zen-cms-gx-md-1` | XS                 |
| .`zen-cms-gx-md-2` | SM                 |
| .`zen-cms-gx-md-3` | MD                 |
| .`zen-cms-gx-md-4` | LG                 |
| .`zen-cms-gx-md-5` | XL                 |
| {% endtab %}       |                    |

{% tab title="LG" %}
LG Viewports (from 992px)

| CSS class          | horizontal spacing |
| ------------------ | ------------------ |
| .`zen-cms-gx-lg-0` | 0                  |
| .`zen-cms-gx-lg-1` | XS                 |
| .`zen-cms-gx-lg-2` | SM                 |
| .`zen-cms-gx-lg-3` | MD                 |
| .`zen-cms-gx-lg-4` | LG                 |
| .`zen-cms-gx-lg-5` | XL                 |
| {% endtab %}       |                    |

{% tab title="XL" %}
XL Viewports (from 1200px)

| CSS class          | horizontal spacing |
| ------------------ | ------------------ |
| .`zen-cms-gx-xl-0` | 0                  |
| .`zen-cms-gx-xl-1` | XS                 |
| .`zen-cms-gx-xl-2` | SM                 |
| .`zen-cms-gx-xl-3` | MD                 |
| .`zen-cms-gx-xl-4` | LG                 |
| .`zen-cms-gx-xl-5` | XL                 |
| {% endtab %}       |                    |
| {% endtabs %}      |                    |

Example:

{% embed url="<https://codepen.io/zenitdesign/pen/rNJBvzZ>" %}

### Vertical spacings (y-axis)

`.zen-cms-gy-*` classes can be used to set vertical spacings.

{% tabs %}
{% tab title="All viewports" %}

| CSS class       | vertcial spacing |
| --------------- | ---------------- |
| .`zen-cms-gy-0` | 0                |
| .`zen-cms-gy-1` | XS               |
| .`zen-cms-gy-2` | SM               |
| .`zen-cms-gy-3` | MD               |
| .`zen-cms-gy-4` | LG               |
| .`zen-cms-gy-5` | XL               |
| {% endtab %}    |                  |

{% tab title="SM" %}
SM Viewports (from 576px)

| CSS class          | vertcial spacing |
| ------------------ | ---------------- |
| .`zen-cms-gy-sm-0` | 0                |
| .`zen-cms-gy-sm-1` | XS               |
| .`zen-cms-gy-sm-2` | SM               |
| .`zen-cms-gy-sm-3` | MD               |
| .`zen-cms-gy-sm-4` | LG               |
| .`zen-cms-gy-sm-5` | XL               |
| {% endtab %}       |                  |

{% tab title="MD" %}
MD Viewports (from 768px)

| CSS class          | vertcial spacing |
| ------------------ | ---------------- |
| .`zen-cms-gy-md-0` | 0                |
| .`zen-cms-gy-md-1` | XS               |
| .`zen-cms-gy-md-2` | SM               |
| .`zen-cms-gy-md-3` | MD               |
| .`zen-cms-gy-md-4` | LG               |
| .`zen-cms-gy-md-5` | XL               |
| {% endtab %}       |                  |

{% tab title="LG" %}
LG Viewports (from 992px)

| CSS class          | vertcial spacing |
| ------------------ | ---------------- |
| .`zen-cms-gy-lg-0` | 0                |
| .`zen-cms-gy-lg-1` | XS               |
| .`zen-cms-gy-lg-2` | SM               |
| .`zen-cms-gy-lg-3` | MD               |
| .`zen-cms-gy-lg-4` | LG               |
| .`zen-cms-gy-lg-5` | XL               |
| {% endtab %}       |                  |

{% tab title="XL" %}
XL Viewports (from 1200px)

| CSS class          | vertcial spacing |
| ------------------ | ---------------- |
| .`zen-cms-gy-xl-0` | 0                |
| .`zen-cms-gy-xl-1` | XS               |
| .`zen-cms-gy-xl-2` | SM               |
| .`zen-cms-gy-xl-3` | MD               |
| .`zen-cms-gy-xl-4` | LG               |
| .`zen-cms-gy-xl-5` | XL               |
| {% endtab %}       |                  |
| {% endtabs %}      |                  |

Example:

{% embed url="<https://codepen.io/zenitdesign/pen/OJQLEpv>" %}

### Horizontal & vertical spacings

`.zen-cms-g-*` classes can be used to set horizontal and vertical spacings simultaneously.&#x20;

{% tabs %}
{% tab title="All viewports" %}

| CSS class      | Spacing |
| -------------- | ------- |
| .`zen-cms-g-0` | 0       |
| .`zen-cms-g-1` | XS      |
| .`zen-cms-g-2` | SM      |
| .`zen-cms-g-3` | MD      |
| .`zen-cms-g-4` | LG      |
| .`zen-cms-g-5` | XL      |
| {% endtab %}   |         |

{% tab title="SM" %}
SM Viewports (from 576px)

| CSS class         | Spacing |
| ----------------- | ------- |
| .`zen-cms-g-sm-0` | 0       |
| .`zen-cms-g-sm-1` | XS      |
| .`zen-cms-g-sm-2` | SM      |
| .`zen-cms-g-sm-3` | MD      |
| .`zen-cms-g-sm-4` | LG      |
| .`zen-cms-g-sm-5` | XL      |
| {% endtab %}      |         |

{% tab title="MD" %}
MD Viewports (from 768px)

| CSS class         | Spacing |
| ----------------- | ------- |
| .`zen-cms-g-md-0` | 0       |
| .`zen-cms-g-md-1` | XS      |
| .`zen-cms-g-md-2` | SM      |
| .`zen-cms-g-md-3` | MD      |
| .`zen-cms-g-md-4` | LG      |
| .`zen-cms-g-md-5` | XL      |
| {% endtab %}      |         |

{% tab title="LG" %}
LG Viewports (from 992px)

| CSS class         | Spacing |
| ----------------- | ------- |
| .`zen-cms-g-lg-0` | 0       |
| .`zen-cms-g-lg-1` | XS      |
| .`zen-cms-g-lg-2` | SM      |
| .`zen-cms-g-lg-3` | MD      |
| .`zen-cms-g-lg-4` | LG      |
| .`zen-cms-g-lg-5` | XL      |
| {% endtab %}      |         |

{% tab title="XL" %}
XL Viewports (from 1200px)

| CSS class         | Spacing |
| ----------------- | ------- |
| .`zen-cms-g-xl-0` | 0       |
| .`zen-cms-g-xl-1` | XS      |
| .`zen-cms-g-xl-2` | SM      |
| .`zen-cms-g-xl-3` | MD      |
| .`zen-cms-g-xl-4` | LG      |
| .`zen-cms-g-xl-5` | XL      |
| {% endtab %}      |         |
| {% endtabs %}     |         |

Example:

{% embed url="<https://codepen.io/zenitdesign/pen/dydbKZv>" %}