# 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="/files/F3vU8nYzbKbRgSXzfY1f" 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

![](/files/vHTZCwRRoH2qepaWOkRS)

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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs.zenit.design/en/content/shopping-experiences/block-inner-spacings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.