1-Spalter, 2-Spalter, 3-Spalter, 4-Spalter
![TYPO3 Grid Element One Column TYPO3 Grid Element 1-Spalter Icon](/fileadmin/_processed_/c/d/csm_symbol_one_column_box_area_1662f9950d.webp)
![TYPO3 Grid Element Two Columns TYPO3 Grid Element 2-Spalter Icon](/fileadmin/_processed_/f/d/csm_symbol_two_columns_fb9050fd5f.webp)
![TYPO3 Grid Element Three Columns TYPO3 Grid Element 3-Spalter Icon](/fileadmin/_processed_/9/c/csm_symbol_three_columns_69a55063a4.webp)
![TYPO3 Grid Element Four Columns TYPO3 Grid Element 4-Spalter Icon](/fileadmin/_processed_/c/0/csm_symbol_four_columns_5422011867.webp)
Mit Grid-Elementen lassen sich ein 1-4 spaltige Raster mit entsprechender Spaltenanzahl anlegen. Die Breite aller Spalten entspricht zusammengenommen der Gesamtbreite des Inhaltsbereiches einer Seite. Die Verteilung der Spalten kann jederzeit geändert und angepasst werden.
![TYPO3 Backend Symbol für ein Grid Element TYPO3 Inhaltselement Raster-Element Backend Symbol im Inhaltsbereich](/fileadmin/_processed_/f/9/csm_symbol_grid_elements_content_area_b01e340847.webp)
Die vier Symbole mit Spalten werden Ihnen begegnen, wenn Sie ein Raster-Element erstellen möchten. Das fünfte Symbol wird im Inhaltsbereich zu sehen sein.
Reiter Allgemein
Im Reiter Allgemein der Raster-Elemente finden sich die gleichen Felder wie im Überschriftelement. Im Gegensatz zu anderen Elementen können Grid-Elemente nicht im Feld Typ zu einem anderen Raster-Element umgewandelt werden. Dort lässt sich ein Raster-Element lediglich zu anderen Content Elementen anpassen.
Raster-Layout
Um beispielsweise aus einem 2-Spalter einen 4-Spalter zu machen, nutzen Sie im Reiter Allgemein die Option in der Spalte Raster-Layout. Das aktuelle Grid-Element ist hierbei bereits ausgewählt. Zum Ändern des Raster-Elements klicken Sie einfach das Symbol des gewünschten Rasters an oder wählen es im Dropdown-Menü aus. Sie müssen danach die Änderung bestätigen.
Wenn sich bereits Inhalte in den Spalten befanden, kann deren Position im Reiter Raster-Elemente angepasst werden. Erfahren Sie hier mehr zum Reiter Raster-Elemente.
Erweiterungsoptionen
Die Erweiterungsoptionen unterscheiden sich zum Teil je nach Spaltenanzahl des Rasters. Die Breite der Spalten kann angepasst werden. Während die Optionen zur Spaltenhöhe und Ausrichtung der Inhalte gleich sind.
2-Spalter – Verteilung der Spalten
Bei einem 2-Spalter ist es möglich die Verteilung der Spalten für die Desktop- und die Tablet-Ansicht einzustellen.
Verteilungen in Prozent in der Desktop-Ansicht:
50 % uns 50 %, 66 % und 33 %, 33 % und 60 %, 75 % und 25 % oder 25 % und 75 %
Verteilungen in Prozent in der Tablet-Ansicht:
50 % und 50 % oder 100 %
Mit der Option 100 % erscheinen die zwei Spalten untereinander statt nebeneinander.
3-Spalter – Verteilung der Spalten
Der 3-Spalter bietet die meisten Anpassungsmöglichkeiten für die Spaltenbreiten.
Verteilungen in Prozent in der Desktop-Ansicht:
33 %, 33 % und 33 % oder 50 %, 25 % und 25 % oder 25 %, 50 % und 25 % oder 25 %, 25 % und 50 % oder 15 %, 70 % und 15 %
Verteilungen in Prozent in der Tablet-Ansicht:
33 %, 33 % und 33 % oder 50 %, 50 % und 50 % oder 100 %
Verteilungen in Prozent in der mobilen Ansicht: 50 %, 50 % und 50 % oder 100 %
Verteilungen in Prozent in der mobilen Porträt-Ansicht: 50 %, 50 % und 50 % oder 100 %
4-Spalter – Verteilung der Spalten
Beim 4-Spalter bestehen keine Optionen die Verteilung der Spalten anzupassen.
Die Spalten werden automatisch gleichmäßig ausgegeben, da sie ohnehin sehr schmal sind.
In der mobilen und der Tablet-Ansicht werden jeweils zwei Spalten oder alle vier Spalten untereinander dargestellt.
Spaltenhöhe & Ausrichtung der Inhalte
Ab zwei Spalten bestehen außerdem die Optionen die Spaltenhöhe einheitlich anzugleichen und die Ausrichtung der Content-Elemente zu bestimmen, sofern diese die gleiche Breite haben. Im Dropdown-Menü für die Ausrichtung können Sie zwischen folgenden Optionen wählen:
- Das erste Element strecken
- Das letzte Element strecken
- Elemente an oberer Kante ausrichten
- Elemente an unterer Kante ausrichten
- Alle Elemente zentrieren
- Alle Elemente gleichmäßig verteilen
1, 2, 3 und 4-Spalter im Frontend
Auf unserer Vorschau-Seite sehen Sie an vielen Stellen Raster-Elemente im Einsatz. Die 1, 2, 3 und 4-Spalter sind oft die Grundlage für die Darstellung anderer Inhaltselemente.