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

Beispiel für ein Container-Snippet mit zwei Container-Blöcken

Content

Container-Snippets
Container-Größe
Container ausrichten
Vertikale Ausrichtung
Padding
Hintergrundfarbe
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-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

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

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

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

justify-content-around: Die Blöcke sind gleichmäßig in der Zeile verteilt, mit gleichem Abstand um sie herum

justify-content-center: Die Blöcke sind in der Mitte der Zeile angeordnet

justify-content-right: Die Blöcke werden in Richtung des rechten Zeilenendes gepackt

justify-content-left: Die Blöcke werden in Richtung des linken Zeilenendes gepackt

Vertikale Ausrichtung

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

top
center
bottom
stretch

Padding

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

Hintergrundfarbe

Sie können die Hintergrundfarbe eines Containerblocks festlegen. Das geht am besten per benutzerdefiniertem Padding.

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.

Aktualisiert am: 28/03/2024

War dieser Beitrag hilfreich?

Danke!