Typo3 - Spaltendarstellung einrichten

In Typo3 können die Inhalte recht einfach in Spalten dargestellt werden. Um das zu erreichen, können vordefinierte Container verwendet werden.

Diese erreicht man nach dem Auswählen von "Neuen Inhalt erstellen" im Bereich "Container":

image.png

image.png

Das Verhältnis der beiden Spalten wird dann im Bereich "Erscheinungsbild" eingestellt. Am einfachsten ist es meist, wenn man sich die gesamte Breite des Inhaltes virtuell in zwölf Spalten aufgeteilt vorstellt. Dadurch sind viele Verhältnisse zwischen den beiden Spalten möglich.

Ist gewünscht, dass die Spalten im Verhältnis 2:1 (also links zwei Drittel, rechts ein Drittel) dargestellt werden, so wählt man in den Col-*-Bereichen das Verhältnis 8:4:

image.png

Die Angaben Col-* beziehen sich dabei auf die Fensterbreite des Browserfensters. So kann für unterschiedliche Geräte ein jeweils anderes Verhältnis verwendet werden:
Col-xxl-*: extra große Bildschirme, ab 1400px Breite
Col-xl-*: große Bildschirme, ab 1200px Breite
Col-lg-*: mittlere Bildschirme (Laptops), ab 992px Breite
Col-md-*: mittlere Bildschirme (Tablets), ab 768px Breite
Col-sm-*: kleine Bildschirme (große Smartphones), ab 576px Breite
Col-*: sehr kleine Bildschirme (Smartphones im Hochformat), unter 576px

Ist die Summe der beiden Spalten kleiner als 12, dann füllen die beiden Spalten nicht die ganze verfügbare Breite aus. Es bleibt rechts ein freier Rand.

Ist die Summe der beiden Spalten größer als 12, dann wirkt das Layout unruhig. Es kann zu unerwünschten Umbrüchen kommen.

Sind die Spalten vorbereitet, so können diese mit beliebigen Inhaltselementen gefüllt werden. Beim Verhältnis 2:1 sieht dies dann auf der Seite so aus:

image.png

Wird als Verhältnis statt 8:4 nur 6:4 verwendet (also in Summe kleiner als 12), hat dies folgende Darstellung zur Folge:

image.png

Wird als Verhältnis statt 8:4 jedoch 8:6 verwendet (also in Summe größer als 12), dann wird die zweite Spalte umgebrochen und rechts bleibt ein leerer Bereich stehen:

image.png


Erstellt: 2026-09-25 06:41:15 UTC von Kuno Sandholzer
Zuletzt aktualisiert: 2026-09-25 07:12:29 UTC von Kuno Sandholzer