--- title: Flexible Layout-Container für TYPO3 url: "https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3" description: Erweitere die eingebauten Layout-Konzepte von TYPO3 mit der Container Extension. Einfache Flexibilität für Redakteure, reduziertes Risiko für zukünftige Upgrades. image: "https://b13.com/fileadmin/_processed_/0/0/csm_Container_pt1_191-1_da228275d6.png" date: 2020-07-15 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # Flexible Layout-Container für TYPO3 [ Container ](https://b13.com/de/wissen/container) [ CType ](https://b13.com/de/wissen/ctype) [ TYPO3 ](https://b13.com/de/wissen/typo3) Flexible Container und Grids für TYPO3 ======================================== ![](https://b13.com/fileadmin/_processed_/a/d/csm_david_5ce18d41e2.jpg)David Steeb 16. Juli 2020 [ RSS Feed ](https://b13.com/de/rss.xml) ![Ein stilisiertes Computerfenster zeigt ein Rasterlayout mit gelben Abschnitten und Textzeilen, umgeben von abstrakten Formen und Laub auf einem dunklen Hintergrund.](https://b13.com/fileadmin/_processed_/7/c/csm_Container_pt1_fcb68638a6.webp "[Translate to Deutsch:] ") \[Translate to Deutsch:\] **Wie man flexible seiteninterne Strukturen mit einer einfachen Erweiterung Core-nah hinzufügt.** Die eingebauten Konzepte von TYPO3 ermöglichen es Integratoren, Setups für alle Arten von Seitentypen, Vorlagentypen und Content-Management-Szenarien zu erstellen. Viele Projekte benötigen am Ende mehr Flexibilität bei der Platzierung von Unterstrukturen, die Elemente oder Module innerhalb eines Inhaltsbereichs enthalten. Genau dafür ist unsere neue [Container-Erweiterung](https://extensions.typo3.org/extension/container/) gedacht! #### Dieser Blog Post ist Teil unserer Container Serie - **[Teil 1: Flexible Containers und Grids für TYPO3](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3)** - [Teil 2: Flexible Containers und Grids für TYPO3 — Einfaches Beispiel](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-zwei) - [Teil 3: Flexible Containers und Grids für TYPO3 — Erweitertes Beispiel und Konfigurationsmöglichkeiten](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-drei) TYPO3 ist ein leistungsfähiges Werkzeug zur Verwaltung und Präsentation von Inhalten in einer elementbasierten, strukturierten Form. Die Container-Extension von b13 erlaubt das Hinzufügen von Layout-„Containern“ zu Inhaltsbereichen. Diese können dann Module und Elemente als optionale Variationen des Hauptlayouts enthalten — dabei denken wir an mehrspaltigen Inhalt, zusammenklappbare Elementgruppierungen, Akkordeon-, Reiter-Container und andere. Die Container-Extension tut dies unter Einhaltung der Best Practices des TYPO3-Core, wodurch Ihre Site flexibel, wartbar und leicht zu aktualisieren bleibt. Unsere Container-Extension ist ein alternativer Ansatz zur Gridelements-Extension, der aus unserer Erfahrung in der Arbeit mit dieser und den anderen verfügbaren Optionen entstanden ist. Wir brauchten einen einfacheren Weg, um zu arbeiten. Im Idealfall wollten wir eine Lösung, die weniger Overhead und Komplexität im Backend für unsere Kunden (z.B. keine Änderungen an bestehenden Backend-Assistenten) und weniger Risiken für uns (z.B. unbeabsichtigter Datenverlust bei Upgrades und Migrationen) mit sich bringt. Seiten mit dem TYPO3-Core strukturieren ----------------------------------------- TYPO3 bietet mit sogenannten „Backend-Layouts“ eine sehr flexible und anpassbare Möglichkeit, das Layout und den strukturellen Aufbau beliebiger Seitenvorlagen zu handhaben. Ein Backend-Layout definiert einen oder mehrere Inhaltsbereiche auf einer Seite, in denen verschiedene Inhaltselemente kombiniert werden können, um komplexe Seiten in einer einfach zu bedienenden Oberfläche zu erstellen. Out-of-the-box unterstützt TYPO3 nicht, Redakteuren optionale Sub-Layouts innerhalb dieser Inhaltsbereiche anzubieten, so dass wir eine Extension dafür benötigen. Erweiterungen von Drittanbietern sorgen für mehr Flexibilität --------------------------------------------------------------- Es gibt mehrere Erweiterungen von Drittanbietern, um dem TYPO3-Backend Grids, Spalten und flexible Elementstrukturen hinzuzufügen. Von [TemplaVoila!](https://extensions.typo3.org/extension/templavoilaplus/) bis [Flux](https://extensions.typo3.org/extension/flux/), mehrere „multi-column“ Extensions, [DCE](https://extensions.typo3.org/extension/dce/)- und [Grid-Elements](https://extensions.typo3.org/extension/gridelements/) — wir haben sie alle in Aktion gesehen, mit den meisten dieser Konzepte gearbeitet (manchmal wurden wir auch dazu gezwungen) und uns in den letzten Jahren für „Grid-Elements“ für unsere Projekte entschieden. „Grid-Elements“ boten zwar die Flexibilität, die wir brauchten, aber die Anpassung des Backend-Layout-Ansatzes auf Seitenebene an einen Ansatz auf der Ebene der Inhaltselemente fügte eine Menge Komplexität hinzu. Wir hatten mit Aktualisierungen, Upgrades und auch einigen der Konzepte auf Struktur- und Datenbankebene zu kämpfen. Diese Extensions erschwerten das Upgrade auf v10 -------------------------------------------------- Wir arbeiten mit TYPO3 v10 in Produktivsystemen seit der Woche nach der ersten Veröffentlichung von v10.0 im Juli 2019. Genau wie 18 Monate zuvor, als Version 9 veröffentlicht wurde, stießen wir auf Inkompatibilitäten zwischen Grids und strukturierten Elementen. Und dasselbe Szenario, mit dem wir zuvor konfrontiert waren, begann sich neu zu entzünden: Wir migrierten einige Elemente auf neue benutzerdefinierte Inhaltstypen, um die Notwendigkeit von Erweiterungen von Drittanbietern zu beseitigen. Wir verschoben einige Aktualisierungen in der Hoffnung, vor dem Start von v10 kompatible Versionen dieser Erweiterungen zu erhalten. Von Zeit zu Zeit dachten wir darüber nach, die benötigten Erweiterungen selbst zu aktualisieren. Das ist an sich eine praktikable Option für einige Extensions mit nur einem Zweck. Die meisten dieser Grid-generierenden Erweiterungen dienen jedoch mehreren Zwecken. Einige ändern andere Teile des TYPO3-Systems, die etwas mit der Generierung eines Container-Typ-Elements zu tun haben können oder auch nicht. Der Aufwand, eine Drittanbieter-Erweiterung auf eine neue TYPO3-Version zu aktualisieren, einschließlich des gesamten Codes für Funktionen, die wir nie verwenden, hat für uns keinen Sinn ergeben. Und auf diese Funktionen bei einem Update zu verzichten, macht für alle anderen keinen Sinn und wird für sie oder uns in Zukunft neue, möglicherweise unerwartete Probleme mit sich bringen. Wir haben uns also gefragt, was wir in einer Grid- oder Container-generierenden Extension benötigen, und haben uns einen Funktionsumfang und Anforderungen ausgearbeitet, die alle unsere Anwendungsfälle abdecken. Wir wollten eine zielgerichtete Lösung, die keinen unnötigen Overhead und keine unnötigen Funktionen enthält. Und wir diskutierten, was wir als eine „core-nahe“ Art der Implementierung definieren würden, wobei wir uns so nah wie möglich am TYPO3-Core, an Best Practices, Flexibilität und Upgrade-Fähigkeit halten wollten. Vorhang auf für Container! ---------------------------- Das Ergebnis ist eine neue Erweiterung namens … \*Trommelwirbel\* … [Container](https://extensions.typo3.org/extension/container/). Sie fügt Container als echte Inhaltstypen hinzu, die auf ähnliche Weise konfiguriert werden, wie [benutzerdefinierte Inhaltselementtypen](https://b13.com/de/wissen/wie-man-individuelle-inhaltselemente-in-typo3-erstellt). Für Integratoren funktionieren Containertypen ähnlich wie bekannte Lösungen wie die Grid-Elements-Erweiterung. Sie konfigurieren das „Backend-Layout“ für einen Inhaltstyp mit der gleichen Syntax wie die Extension „[Content Defender](https://extensions.typo3.org/extension/content_defender/)„. Container fügt Data Processors hinzu, um den Inhalt innerhalb von Containerelementen im Frontend zu rendern. **Und Container funktioniert in mehrsprachigen Setups. Und mit Workspaces.** Und das war’s auch schon. Nicht mehr und nicht weniger. Unsere Erfahrung zeigt uns, dass zielgerichtete, „Single-Purpose“-Extensions uns selbst in Zukunft praktische Vorteile bieten: einfachere Wartung, einfachere und weniger risikoreiche Upgrades und saubereren Code. Unsere Container-Erweiterung löst keine anderen Probleme oder verändert das Verhalten von TYPO3 auf andere Art und Weise. Sie fügt lediglich Container-Elemente hinzu, die auf die gleiche Weise definiert sind wie die Content Element-Typen des TYPO3-Kerns. Wir können Container zur Strukturierung von Inhalten in mehreren Bereichen verwenden, wie z.B. ein zweispaltiges Layout. Wir können Elemente mit vordefinierten einzelnen Feldern und Inhaltsbereichen für komplexe Layout-Anforderungen verwenden, ohne auf Flexforms für den Inhalt zurückgreifen zu müssen. Wann sollte ich Containerelemente verwenden? ---------------------------------------------- Dinge, die Du über Containerelemente wissen musst: - Ein Containerelement strukturiert Inhaltsbereiche innerhalb eines Seitentemplates (siehe Abb. 1), indem es einer Seite einen Abschnitt hinzufügt, der einen einzelnen Inhaltsbereich in — in diesem Fall — zwei Spalten „aufbricht“. - Diese können auf einer einzigen Seite wiederholt und mehrfach verwendet werden: Sie sind flexibel und optional. - Ein Container kann immer mehrere untergeordnete Elemente unterschiedlichen Typs enthalten. Er kann mehrere Elemente in einem einzigen Containerbereich enthalten, um diese Elemente zu gruppieren, z.B. um eine gemeinsame Hintergrundfarbe oder ein gemeinsames Hintergrundbild zu erhalten oder um einen Inhaltsblock in einem einklappbaren Container zu gruppieren. Oder um mehrere Inhaltsbereiche innerhalb eines Seitentemplates einzuführen. ![Backend-Ansicht eines Container Elements](https://b13.com/fileadmin/_processed_/f/f/csm_Example-backend-view-of-a-page-with-our-container-element_846c9dbc69.webp) Abbildung 1: Beispiel Backend Ansicht einer Seite mit einem Container Element. ### Wann wir Container vermeiden **Wir verwenden keine Containerelemente zum Aufbau von Seitenstrukturen** — dafür gibt es das zentrale Backend-Layoutkonzept. Wenn alle Inhalte auf einer bestimmten Seite in einem einzigen Containerelement platziert werden (um z. B. ein Seitenlayout mit einer Sidebar zu ermöglichen), empfiehlt es sich, stattdessen ein geeignetes Backend-Layout hinzuzufügen. Da Container im Gegensatz zu Layouts optional sind, „zwingen“ sie die Seite nicht dazu, eine bestimmte Struktur zu haben. Wenn du nicht weißt, wovon wir sprechen, kannst du dich glücklich schätzen — wir haben zu oft gesehen, wie solche Konfigurationen den Redakteuren Kopfschmerzen bereiten, um sie hier unerwähnt zu lassen. **Wir verwenden auch keine Containerelemente, um untergeordnete Inhaltselemente eines einzigen Typs zu gruppieren oder zu strukturieren.** Ein einfaches Beispiel wäre eine Liste von Kontakten, eine Liste von Links, ein Slider-Element mit mehreren Slides oder eine Liste von Teaser-Elementen. Wenn alle möglichen untergeordneten Elemente vom **gleichen** Typ sind, verwenden wir ein anderes Konzept, das wir „Listenelemente“ nennen. Ja, du ahnst es schon, auch dafür gibt es eine TYPO3-Erweiterung. Gib uns noch ein paar Wochen — wir bereiten die Veröffentlichung auch dieser Extension vor! OK, wie bekomme ich Container? -------------------------------- ### Installation Die Extension mit Composer installieren: `composer req b13/container` Das war’s — schon kannst du damit beginnen, Container-Elemente anzulegen und zu verwenden. Und wie funktioniert das? --------------------------- Für ein einfaches Beispiel [siehe Teil 2](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-zwei). In [Teil 3](https://b13.com/de/wissen/flexible-container-und-grids-fuer-typo3-teil-drei) zeigen wir ein fortgeschrittenes Beispiel und erklären alle Konfigurationsoptionen. Denkst Du über ein Upgrade auf TYPO3 v10 nach? ------------------------------------------------ Erweiterungen wie Gridelements und Flux sind nur einer der Bereiche, die bei der Planung eines Upgrades berücksichtigt werden müssen. Wir helfen bei der Analyse einer Instanz auf Upgrade-Fähigkeit, erforderliche Änderungen und Aufräumarbeiten für einen reibungslosen Upgrade-Prozess. [ Mehr über TYPO3-Upgrades ](https://b13.com/de/loesungen/typo3-upgrades) ### Geschrieben von: ![Lächelnder Mann mit kurzen Haaren und einem Bart, der ein rotes T-Shirt trägt, steht in einem gut beleuchteten Innenraum mit verschwommenem Hintergrund.](https://b13.com/fileadmin/_processed_/a/d/csm_david_cf042ebb7f.webp) Als b13-Gründer und CEO is David derjenige, mit dem Du es zu tun haben wirst, wenn Du mit uns zusammenarbeiten möchtest. Er eignet sich ständig neue Fähigkeiten an und bestimmt maßgeblich unsere hochmodernen Ansätze in der Frontend-Entwicklung. David Steeb CEO [ mehr von David Steeb ](https://b13.com/de/team/david-steeb) Ähnliche Artikel ------------------ - ![Cartoon-Trophäenfigur umgeben von Händen, die Daumen hoch und ein Herzzeichen geben, vor einem Hintergrund mit Zahnradmuster.](https://b13.com/fileadmin/_processed_/f/7/csm_T3ppy_Design_Kit_Headerbild_b51eb9dc31.webp) ### T3ppy gibt TYPO3 ein freundliches Gesicht 06. August 2026 | Florian “Flix” Keitgen TYPO3 ist leistungsstark — muss sich aber nicht unpersönlich anfühlen. Das ist T3ppy, unser freundlicher Begleiter fürs Backend. [ weiterlesen: T3ppy gibt TYPO3 ein freundliches Gesicht ](https://b13.com/de/wissen/t3ppy-design-kit) - ![Hammer mit der Aufschrift 'KI' auf einem schaltkreis-musternden Hintergrund mit gelben Sternen, der Regulierung oder Gesetzgebung im Zusammenhang mit künstlicher Intelligenz in der EU symbolisiert.](https://b13.com/fileadmin/_processed_/1/0/csm_EUAIAct_Headerbild_510724b3de.webp) ### KI-Inhalte in TYPO3: Transparenz braucht Verantwortung 02. August 2026 | Benni Mack Der EU AI Act rückt die Herkunft KI-generierter Inhalte in den Fokus. AI Label kennzeichnet KI-generierte und KI-bearbeitete Inhalte in TYPO3 und dokumentiert, wer den… [ weiterlesen: KI-Inhalte in TYPO3: Transparenz braucht Verantwortung ](https://b13.com/de/wissen/ai-content-in-typo3-labelling-needs-accountability) - ![Eine Reihe stilisierter Figuren in verschiedenen Posen, jede mit einem markanten orangefarbenen Hut, zeigt einen Übergang vom Gehen zum Stillstehen, während sie auf ein Handy schauen, vor einem lila Gitterhintergrund.](https://b13.com/fileadmin/_processed_/d/7/csm_QueuesDDEV_Headerbild_f640931350.webp) ### Bessere Skalierbarkeit mit entkoppelten Queues: So richtest du RabbitMQ mit TYPO3 ein 10. April 2024 | Jochen Roth Wenn integrierte Nachrichtentransporte an ihre Grenzen stoßen, kann RabbitMQ TYPO3 mit einer skalierbaren, robusten Message Queue versorgen. [ weiterlesen: Bessere Skalierbarkeit mit entkoppelten Queues: So richtest du RabbitMQ mit TYPO3 ein ](https://b13.com/de/wissen/bessere-skalierbarkeit-mit-entkoppelten-queues-so-richtest-du-rabbitmq-mit-typo3-ein) - ![Eine Cartoonfigur, die einem Schild ähnelt, gibt ein Daumen hoch vor einer Computeroberfläche mit verschiedenen Menüoptionen.](https://b13.com/fileadmin/_processed_/e/6/csm_Header_cda1f80173.webp) ### Gestatten, T3ppy! Ein neues Zeitalter für die Redaktionsarbeit in TYPO3 01. April 2026 | Florian “Flix” Keitgen Entdecke T3ppy und AiM — Deine KI-Assistenz im TYPO3 Backend für bessere Inhalte, klare Strukturen und volle Kontrolle über Redaktions-Prozesse. [ weiterlesen: Gestatten, T3ppy! Ein neues Zeitalter für die Redaktionsarbeit in TYPO3 ](https://b13.com/de/wissen/gestatten-t3ppy-ein-neues-zeitalter-fuer-die-redaktionsarbeit-in-typo3) - ![Retro-Mikrofon-Illustration mit einem Einkaufswagen-Symbol im Hintergrund, das E-Commerce oder Online-Shopping symbolisiert.](https://b13.com/fileadmin/_processed_/f/8/csm_Marketplace_Headerbild_ee1575614c.webp) ### Warum TYPO3 einen Marketplace für Produkte braucht 25. März 2026 | Florian “Flix” Keitgen Ein Marketplace würde TYPO3-Produkte sichtbarer machen, den Vergleich erleichtern und Agenturen sowie Kunden gleichermaßen profitieren lassen. [ weiterlesen: Warum TYPO3 einen Marketplace für Produkte braucht ](https://b13.com/de/wissen/warum-typo3-einen-marketplace-fuer-produkte-braucht) - ![Eine Hand hält eine Lupe über den Laptop-Bildschirm, der eine Webseite mit einem Bild und Textelementen anzeigt.](https://b13.com/fileadmin/_processed_/e/5/csm_BackendUserSection_Headerbild_6093c842fd.webp) ### Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6) 05. März 2026 | David Steeb Entdecke den oft unterschätzten Doktype 6 (Backend User Section) in TYPO3 für sichere interne Vorschauen, Redaktionstrainings und Prototyping. Erfahre praxisnahe Anwendungsfälle,… [ weiterlesen: Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6) ](https://b13.com/de/wissen/ein-echter-geheimtipp-in-typo3-die-backend-user-section-doktype-6) - ![Zwei stilisierte Webseiten-Designs mit einem Benutzerprofil, Platzhaltern für Bilder und Textabschnitten, vor einem hellblauen Hintergrund.](https://b13.com/fileadmin/_processed_/2/0/csm_BackendPreview_Headerbild_b4c5799cfa.webp) ### Backend-Content-Previews mit System — warum wir EXT:backendpreviews entwickelt haben 09. Februar 2026 | David Steeb EXT:backendpreviews sorgt für konsistente Content-Previews im TYPO3-Backend mit Fluid Templates, Layouts und Partials. [ weiterlesen: Backend-Content-Previews mit System — warum wir EXT:backendpreviews entwickelt haben ](https://b13.com/de/wissen/backend-content-previews-mit-system-warum-wir-extbackendpreviews-entwickelt-haben) - ![Eine menschliche Hand schüttelt eine Roboterhand vor einem lila Hintergrund mit Herzmustern, was die Zusammenarbeit zwischen Menschen und Technologie symbolisiert.](https://b13.com/fileadmin/_processed_/6/2/csm_AIbotsLoveMarkdown_Headerbild_72fe5820d6.webp) ### Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown 28. Januar 2026 | Benni Mack Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems. [ weiterlesen: Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown ](https://b13.com/de/wissen/das-internet-ist-nicht-mehr-nur-fuer-menschen-ki-bots-lieben-markdown) - ![Mehrere farbenfrohe Mockups von Webseiten, die übereinander gestapelt sind und verschiedene Layouts sowie Designelemente vor einem lila Hintergrund präsentieren.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27. Januar 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. - ![Grafik mit stilisierten Darstellungen eines Turms, in dessen Mitte der Text "T3CON25 Düsseldorf" deutlich sichtbar ist.](https://b13.com/fileadmin/_processed_/7/b/csm_T3CON2025_Headerbild_fc9c5cc53e.webp) ### T3CON25 — der Zukunft des Content Managements einen Schritt näher 10. Dezember 2025 | Franzi Töpler Die T3CON25 zeigte die Zukunft von TYPO3 mit Einblicken in TYPO3 v14, KI, digitale Souveränität und Open-Source-Lösungen für moderne, sichere Webauftritte. [ weiterlesen: T3CON25 — der Zukunft des Content Managements einen Schritt näher ](https://b13.com/de/wissen/t3con25-der-zukunft-des-content-managements-einen-schritt-naeher)