Adjusting gaps in CMS blocks

In this tutorial you will learn how to customise spacing in CMS blocks with ThemeWare® CSS classes.

ThemeWare® "Grid" CMS blocks

Elements in "Grid" CMS blocks have a fixed spacing of 40px in Shopware 6. ThemeWare® provides you with various CSS classes to change this spacing.

With ThemeWare® 3.2 we have added the following CSS gap classes for ThemeWare® "Grid" CMS blocks as well as the standard "Grid" CMS blocks from Shopware.

CSS classes

Class	Block/Section	Description
twt-cms-grid-gap-0	Block	Sets the gap in CMS blocks to 0 pixels.
twt-cms-grid-gap-5	Block	Sets the gap in CMS blocks to 5 pixels.
twt-cms-grid-gap-10	Block	Sets the gap in CMS blocks to 10 pixels.
twt-cms-grid-gap-15	Block	Sets the gap in CMS blocks to 15 pixels.
twt-cms-grid-gap-20	Block	Sets the gap in CMS blocks to 20 pixels.
twt-cms-grid-gap-25	Block	Sets the gap in CMS blocks to 25 pixels.
twt-cms-grid-gap-30	Block	Sets the gap in CMS blocks to 30 pixels.
twt-cms-grid-gap-35	Block	Sets the gap in CMS blocks to 35 pixels.
twt-cms-grid-gap-40	Block	Sets the gap in CMS blocks to 40 pixels.
twt-cms-grid-gap-45	Block	Sets the gap in CMS blocks to 45 pixels.
twt-cms-grid-gap-50	Block	Sets the gap in CMS blocks to 50 pixels.

Note: How to insert the CSS classes please find in the article ThemeWare® CSS classes for Shopping Experiences.

Details

---

ThemeWare® "Columns" CMS blocks

The new CSS "Gap" classes also work in the "Columns" blocks of ThemeWare®.

Details

Note: If you want to adjust the spacing in mobile viewports separately, use the separate CSS column spacing classes: Adjusting column spacings in CMS blocks