# Adjusting column spacings in CMS blocks
ThemeWare® provides you with a comprehensive selection of CSS classes with which you can modify the column spacing in CMS blocks - i.e. the spacing between two columns.
{% hint style="success" %}
**Tip**: Please find application examples in our [demoshops](https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-styling/Adjusting-column-spacings-in-CMS-blocks/).
{% endhint %}
{% hint style="info" %}
**Note**: Use the new, more intuitive CSS classes to adjust the gaps in CMS blocks: [Adjusting gaps in CMS blocks](/knowledge-base/tutorials/shopping-experiences/adjusting-gaps-in-cms-blocks.md)
{% endhint %}
***
## ThemeWare® "Column" CMS block
Columns in CMS blocks have a fixed padding of `40px` (2x `20px`) in Shopware 6. ThemeWare® provides you with various CSS classes to change this spacing.
The ThemeWare® CSS column spacing classes work for ThemeWare® "Column" CMS blocks as well as most standard CMS blocks from Shopware.
#### CSS classes
| Class | Block/Section | Description |
| -------------------------- | ------------- | --------------------------------------------------------------------- |
| **twt-cms-col-padding-0** | Block | Sets the padding-left/-right for columns in CMS blocks to 0 pixels. |
| **twt-cms-col-padding-5** | Block | Sets the padding-left/-right for columns in CMS blocks to 5 pixels. |
| **twt-cms-col-padding-10** | Block | Sets the padding-left/-right for columns in CMS blocks to 10 pixels. |
| **twt-cms-col-padding-15** | Block | Sets the padding-left/-right for columns in CMS blocks to 15 pixels. |
| **-** | - | 20 pixels is the default column spacing. |
| **twt-cms-col-padding-25** | Block | Sets the padding-left/-right for columns in CMS blocks to 25 pixels. |
| **twt-cms-col-padding-30** | Block | Sets the padding-left/-right for columns in CMS blocks to 30 pixels. |
| **twt-cms-col-padding-35** | Block | Sets the padding-left/-right for columns in CMS blocks to 35 pixels. |
| **twt-cms-col-padding-40** | Block | Sets the padding-left/-rightg for columns in CMS blocks to 40 pixels. |
{% hint style="info" %}
**Note**: How to insert the CSS classes please find in the article [ThemeWare® CSS classes for Shopping Experiences](/knowledge-base/tutorials/shopping-experiences/themeware-css-classes-for-shopping-experiences.md).
{% endhint %}
#### Details
#### Example
{% hint style="info" %}
**Note**: You can activate or deactivate the ThemeWare® "CSS column padding classes" as required. You can find the configuration in the Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes".
{% endhint %}
### Mobile representation
In mobile viewports, columns are represented one below the other. They have a fixed defined margin of 0px. ThemeWare® version 2.1 and higher provides you with various CSS classes: you can change this spacing.
The CSS classes work for ThemeWare® "Column" CMS blocks as well as most standard CMS blocks from Shopware.
#### CSS classes
| Class | Block/Section | Description |
| ------------------------- | ------------- | -------------------------------------------------------------- |
| **-** | - | 0 pixels is the default column margin. |
| **twt-cms-col-margin-5** | Block | Sets the margin-bottom for columns in CMS blocks to 5 pixels. |
| **twt-cms-col-margin-10** | Block | Sets the margin-bottom for columns in CMS blocks to 10 pixels. |
| **twt-cms-col-margin-15** | Block | Sets the margin-bottom for columns in CMS blocks to 15 pixels. |
| **twt-cms-col-margin-20** | Block | Sets the margin-bottom for columns in CMS blocks to 20 pixels. |
| **twt-cms-col-margin-25** | Block | Sets the margin-bottom for columns in CMS blocks to 25 pixels. |
| **twt-cms-col-margin-30** | Block | Sets the margin-bottom for columns in CMS blocks to 30 pixels. |
| **twt-cms-col-margin-35** | Block | Sets the margin-bottom for columns in CMS blocks to 35 pixels. |
| **twt-cms-col-margin-40** | Block | Sets the margin-bottom for columns in CMS blocks to 40 pixels. |
| **twt-cms-col-margin-45** | Block | Sets the margin-bottom for columns in CMS blocks to 45 pixels. |
| **twt-cms-col-margin-50** | Block | Sets the margin-bottom for columns in CMS blocks to 50 pixels. |
| **twt-cms-col-margin-55** | Block | Sets the margin-bottom for columns in CMS blocks to 55 pixels. |
| **twt-cms-col-margin-60** | Block | Sets the margin-bottom for columns in CMS blocks to 60 pixels. |
| **twt-cms-col-margin-65** | Block | Sets the margin-bottom for columns in CMS blocks to 65 pixels. |
| **twt-cms-col-margin-70** | Block | Sets the margin-bottom for columns in CMS blocks to 70 pixels. |
| **twt-cms-col-margin-75** | Block | Sets the margin-bottom for columns in CMS blocks to 75 pixels. |
| **twt-cms-col-margin-80** | Block | Sets the margin-bottom for columns in CMS blocks to 80 pixels. |
{% hint style="info" %}
**Note**: How to insert the CSS classes please find in the article [ThemeWare® CSS classes for Shopping Experiences](/knowledge-base/tutorials/shopping-experiences/themeware-css-classes-for-shopping-experiences.md).
{% endhint %}
#### Details
#### Examples
Left: default | Right: twt-cms-col-margin-15
***
## ThemeWare® "Grid" CMS blocks
You can also use the above-mentioned CSS classes for "Column" blocks in "Grid" blocks from ThemeWare®, but we have introduced new, more intuitive CSS classes for these with ThemeWare® 3.2.0 and recommend using these new CSS classes in future.
You can find more information on this in the following article:
{% content-ref url="/pages/2XPIxIG85JHCxQO54SUY" %}
[Adjusting gaps in CMS blocks](/knowledge-base/tutorials/shopping-experiences/adjusting-gaps-in-cms-blocks.md)
{% endcontent-ref %}
***
## New CSS classes with ThemeWare® 3.2.0
With ThemeWare® 3.2 we have added new CSS spacing classes for ThemeWare® "Grid" and "Columns" CMS blocks. These combine the functionality of the two CSS classes `twt-cms-col-padding` and `twt-cms-col-margin` mentioned above.
The new CSS "Gap" classes work in "Grids" and in the "Columns" blocks of ThemeWare®.
You can find more information on this in the following article:
{% content-ref url="/pages/2XPIxIG85JHCxQO54SUY" %}
[Adjusting gaps in CMS blocks](/knowledge-base/tutorials/shopping-experiences/adjusting-gaps-in-cms-blocks.md)
{% endcontent-ref %}
---
# 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://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/adjusting-column-spacings-in-cms-blocks.md?ask=
```
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.