# Spalten-CSS-Klassen in ThemeWare® CMS-Elementen

In diesem Artikel erfährst du, wie du die Konfiguration "CSS-Klasse (Spalte)" in CMS-Elementen von ThemeWare® nutzen kannst.

{% hint style="info" %}
**Hinweis**: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: [ThemeWare® Services im Überblick](https://service.themeware.design/service)
{% endhint %}

***

## Spalten-CSS-Klassen

Bestimmte CMS-Blöcke von ThemeWare® (z.B. "Sechs Spalten (Individuell)") können die Experten-Konfiguration "**CSS-Klasse (Spalte)**" bestimmter CMS-Element (z.B. "Runder Teaser") übernehmen.

Dadurch kannst du die Spaltenanzahl in verschiedenen Viewports festlegen, vorausgesetzt du kennst dich ausreichend mit dem Grid-System von Bootstrap aus.

{% embed url="<https://getbootstrap.com/docs/5.0/layout/grid/>" %}
Grid system
{% endembed %}

{% hint style="warning" %}
**Wichtig**: Bitte beachte, dass sich diese Funktion derzeit in einer Testphase befindet und ggf. noch einmal geändert werden kann.
{% endhint %}

## Beispiel

Standardmäßig haben die "individuellen" CMS-Blöcke ihr vorgesehenes Spaltenlayout. Hier zum Beispiel der 6-Spalter:

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FiHKdDFb25vdHJ2V69euG%2Fimage.png?alt=media&#x26;token=1a1aebb4-f2fa-4b79-a929-069368f054f6" alt=""><figcaption><p>ThemeWare® "Sechs Spalten (Individuell)"</p></figcaption></figure>

Mit der Experten-Konfiguration "CSS-Klasse (Spalte)" im Tab "Erweitert" des CMS-Elementes (hier "Runder Teaser"), kannst du mit Bootstrap-Klassen (z.B. `col-3`) eine Spaltenbreite für das entsprechende Element definieren.

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fz0Ri4PlB7kRrd9BVyktB%2Fimage.png?alt=media&#x26;token=12038321-acaa-4629-abb5-a454315ca784" alt=""><figcaption></figcaption></figure>

```
// Beispiele
col-6 col-md-2
col-6 col-md-3 col-xl-2
col-6 col-md-4 col-lg-3 col-xl-2
col-6 col-md-4 col-lg-3 col-xl-2 d-none d-xl-block
```

Nun sieht der Block wie folgt aus:

<div align="left"><figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fn1OktzOSZlVaevES7uYe%2Fimage.png?alt=media&#x26;token=2657b310-0037-43ae-aa73-8b398a2f49c7" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Tipp**: Der Abstand zwischen den beiden Zeile kann, wie gehabt, über die gängigen Abstandsklassen (hier `twt-cms-col-margin-20`) ergänzt werden.
{% endhint %}

Wie du sicherlich bemerkt hast, sind alle Spalten üblicherweise links ausgerichtet. Auch dies kannst du beeinflussen.

## Ergänzende CSS-Klassen für den Spalten-CMS-Block

Zusätzlich zu den CSS-Klassen, welche du in den CMS-Elementen einsetzen kannst, kannst du auch CSS-Klassen an den CMS-Blöcken nutzen um beispielsweise die horizontale Ausrichtung der Spalten im CMS-Block definieren.

### Horizontale Ausrichtung

Nutze dafür einfach die entsprechenden [Bootstrap CSS-Klassen](https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment) (siehe `justify-content-...`) im entsprechenden CMS-Block. Da die Block-Klassen nicht an der – in diesem Fall – benötigten Stelle platziert werden, verwende bitte den Prefix `twt-` (also `twt-justify-content-...`) . Diese Klassen werden dann automatisch von den "individuellen" CMS-Blöcken erkannt und an die `row` weitervererbt.

```
// Beispiele
twt-justify-content-center
twt-justify-content-xl-around
```

Verwendest du die CSS-Klasse `twt-justify-content-center` im CMS-Block sieht unser Beispiel nun wie folgt aus:

<div align="left"><figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fxl73zU0lwGWoJHKV1GNO%2Fimage.png?alt=media&#x26;token=d0d098f5-9d91-401f-be20-de838ed163b6" alt="" width="563"><figcaption></figcaption></figure></div>

### Flexible Spalten

Möchtest du keine Spaltenbreiten definieren, kannst du die Klasse `twt-flex-columns` im CMS-Block verwenden. Hierbei richten sich die Spalten nach der Größe der entsprechenden CMS-Elemente (diese wird i.d.R. durch die verwendeten Bilder vorgegeben).

In unserem Beispiel sind die Thumbnails der Bilder `227px` groß. Dies führt zu folgendem Ergebnis:

<div align="left"><figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fpq7GenKUGXfUj8KFu0rZ%2Fimage.png?alt=media&#x26;token=c3f61902-7883-43a6-9014-91387fc9ddac" alt="" width="563"><figcaption></figcaption></figure></div>

Über die Konfiguration "Maximale Breite" im Bereich "Allgemein" vom Tab "Layout", kannst du die maximale Breite eines Teasers definieren. Stellst du hier z.B. `140px` ein werden die Teaser in unserem Beispiel wie folgt dargestellt:

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2Fkli0LJn5vrZWYVsdpkic%2Fimage.png?alt=media&#x26;token=81c5c41f-5256-45d9-8e06-bd1b494cc983" alt=""><figcaption></figcaption></figure>