> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helpdesk.webmag.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Layout/Container Snippet


Container-Snippets helfen bei der Erstellung komplexer Layouts. Sie können alle Webmag-Snippets in die Container-Blöcke einfügen.

![Beispiel für ein Container-Snippet mit zwei Container-Blöcken](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/container_60f9t8.gif)


**Content**

1. [Container-Snippets](#1-container-snippets)
2. [Container-Größe](#1-container-breakpoints)
2. [Container ausrichten](#1-container-ausrichten)
3. [Vertikale Ausrichtung](#1-vertikale-ausrichtung)
4. [Padding](#1-padding)
4. [Hintergrundfarbe](#1-hintergrundfarbe)
5. [Position](#1-position)


# Container-Snippets

Derzeit haben wir Container-Snippets mit 2, 3, 4 und 6 Container-Blöcken. Jeder Block kann in der Größe für verschiedene Bildschirmgrößen angepasst werden.

![Container-Snippets mit 2, 3, 4, und 6 Container-Blöcken](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/container-snippetsneu_ocmzc4.jpg)



# Container-Breakpoints

Unser Grid ist durch 12 Spalten auf einer Seite definiert. Sie können die Größe der Container für 5 verschiedene Bildschirmgrößen einstellen.

* Extra small <576px 
* Small ≥576px
* Medium ≥768px
* Large ≥992px
* Extra large ≥1200px

![Einstellungen eines Container-Snippets mit zwei Container-Blöcken. Die Blöcke haben eine Breite von 100% (12/12) auf Bildschirmen kleiner als 576px und eine Breite von 50% (6/12) auf Bildschirmen größer als 768px](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/container-sizesneu_1olzmat.jpg)


# Container ausrichten

Mit den Ausrichtungsmöglichkeiten des Container-Snippets können Sie die Ausrichtung der Blöcke auf der x-Achse ändern.

![justify-content-between: Die Blöcke werden gleichmäßig in der Zeile verteilt; das erste Element steht in der Startzeile, das letzte Element in der Endzeile](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-1neu_1uavg26.jpg)

![justify-content-around: Die Blöcke sind gleichmäßig in der Zeile verteilt, mit gleichem Abstand um sie herum](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-2neu_lvo2t6.jpg)

![justify-content-center: Die Blöcke sind in der Mitte der Zeile angeordnet](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-3neu_ucpe8f.jpg)

![justify-content-right: Die Blöcke werden in Richtung des rechten Zeilenendes gepackt](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-4neu_r11fsl.jpg)

![justify-content-left: Die Blöcke werden in Richtung des linken Zeilenendes gepackt](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/align-blocks-5neu_1i28b7x.jpg)


# Vertikale Ausrichtung

Jeder Container kann vertikal ausgerichtet werden. Sie können eine der folgenden Optionen wählen:

* top
* center
* bottom
* stretch

![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/vertical-alignmentneu_12lp36.jpg)


# Padding

Ändern Sie die Füllung jedes Blocks, um unterschiedliche Größen von Leerraum zu erzeugen.

![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/paddingneu_1ejah7x.jpg)


# Hintergrundfarbe

Sie können die Hintergrundfarbe eines Containerblocks festlegen. Das geht am besten per benutzerdefiniertem [Padding](#1-padding).

![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/background-colourneu_1d1ppn8.jpg)


# Position

Wenn ein Block auf Position "Sticky" eingestellt ist, bleibt er am oberen Rand der Seite, wenn ein anderer Container eine größere Höhe als die Fensterhöhe hat.

![](https://storage.crisp.chat/users/helpdesk/website/dec6458c8c55a000/positionneu_1s1gofu.jpg)