--- title: Flexible Layout Containers for TYPO3 url: "https://b13.com/knowledge/flexible-containers-and-grids-for-typo3" description: "Extend TYPO3’s built-in layout concepts with the Container Extension. Simple flexibility for editors, reduced risk for future 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 Containers for TYPO3 [ Container ](https://b13.com/knowledge/container) [ CType ](https://b13.com/knowledge/ctype) [ TYPO3 ](https://b13.com/knowledge/typo3) Flexible Containers and Grids for TYPO3 ========================================= ![](https://b13.com/fileadmin/_processed_/a/d/csm_david_5ce18d41e2.jpg)David Steeb 16 July 2020 [ RSS Feed ](https://b13.com/rss.xml) ![A stylized computer window displays a grid layout with yellow sections and text lines, surrounded by abstract shapes and foliage in a dark background.](https://b13.com/fileadmin/_processed_/7/c/csm_Container_pt1_fcb68638a6.webp) **How to add flexible in-page structures with a simple extension—the core way.** TYPO3’s built-in concepts allow integrators to create setups for all kinds of page types, template types, and content management scenarios. Many projects end up needing more flexibility in placing substructures containing elements or modules within a content area. That’s precisely what our new [Container](https://extensions.typo3.org/extension/container/) extension is for! #### This post is part of our Container Series - **[Part 1: Flexible Containers and Grids for TYPO3](https://b13.com/knowledge/flexible-containers-and-grids-for-typo3)** - [Part 2: Flexible Containers and Grids for TYPO3—Basic Example](https://b13.com/knowledge/flexible-containers-and-grids-for-typo3-part-two) - [Part 3: Flexible Containers and Grids for TYPO3—Advanced Example](https://b13.com/knowledge/flexible-containers-and-grids-for-typo3-part-three) TYPO3 is a powerful tool for managing and presenting content in an element-based, structured form. b13’s Container extension allows the addition of layout “containers” to content areas. These can then contain modules and elements as optional variations to the main layout—think multi-column content, collapsible, accordion, tab container, and others. Container does this while following TYPO3 core best practices, keeping your site flexible, maintainable, and easy to upgrade. Our container extension is an alternative approach to the Gridelements extension, born out of our experience working with it and the other options out there. We needed a more straightforward way to work. Ideally, we wanted a solution that introduced less overhead and complexity in the backend for our clients (e.g., no changes to existing backend wizards) and fewer risks for us (e.g., unintended data loss during upgrades and migrations). Structure Pages With Core --------------------------- TYPO3 offers a very flexible and customizable way of handling the layout and structural setup of any page template by using so-called “backend layouts.” A backend layout defines one or more content areas on a page where various content elements can be combined to create complex pages in an easy-to-use interface. Out-of-the-box, TYPO3 doesn’t support offering editors optional sub-layouts within these content areas, so you’ll need an extension. Third-Party Extensions Add More Flexibility --------------------------------------------- There are several third-party extensions for adding grids, columns, and flexible element structures to the TYPO3 backend. From [TemplaVoila](https://extensions.typo3.org/extension/templavoilaplus/)! to [Flux](https://extensions.typo3.org/extension/flux/), several “multi-column” extensions, [DCE](https://extensions.typo3.org/extension/dce/) and [Grid Elements](https://extensions.typo3.org/extension/gridelements/)—we’ve seen them all in action, worked with (sometimes forced to work with) most of these concepts, and settled on Grid Elements for our projects in the past few years. While Grid Elements offered the flexibility we needed, adapting the backend page-level layout approach to a content-element level approach added a lot of complexity. We have struggled with updates, upgrades, and some of the concepts on a structural and database level. Those Extensions made Upgrading to V10 More Difficult ------------------------------------------------------- We have been working with TYPO3 v10 in production since the week after the initial release of v10.0 in July 2019. Just like 18 months earlier, when version nine was released, we ran into incompatibilities between grids and structured elements. And the same scenario we faced before started to rear its ugly head: We migrated some elements to new custom content types to remove the need for third-party extensions. We postponed some updates in the hope of getting compatible versions of these extensions before the v10 launch. From time to time, we thought about updating the extensions we needed ourselves. In itself, that is a viable option for some single-purpose extensions. However, most of these grid-generating extensions serve multiple purposes. Some change other parts of the TYPO3 system that may or may not have something to do with generating a container-type element. Investing the effort to upgrade a third-party extension to a new TYPO3 version, including all the code for features we never use, doesn’t make sense for us. And doing it without that doesn’t make sense for anyone else and will introduce new, potentially unexpected, problems for them or us down the road. So we asked ourselves what we need in a grid- or container-generating extension and came up with a feature set and requirements that satisfy all our use-cases. We wanted a targeted solution that didn’t include unnecessary overhead or features. And we discussed what we would define as a “core-near” way of implementation, staying as close to TYPO3 core, best practices, flexibility, and “upgradability” as possible. Please Welcome: Container! ---------------------------- The result is a new extension called … \*drum roll\* … [Container](https://extensions.typo3.org/extension/container/). It adds containers as real content types, configured in a similar way to [custom content element types](https://b13.com/knowledge/how-to-create-custom-content-elements-in-typo3). For integrators, container types work similarly to familiar solutions like the Grid Elements extension. You configure the “backend layout” for a content type using the same syntax as the [Content Defender](https://extensions.typo3.org/extension/content_defender/) extension. Container adds data processors to render the content inside container elements in the frontend. **And Container works in multilingual setups. And with Workspaces.** And that’s about it. Nothing more, nothing less. Our experience shows us that highly-targeted, “single-purpose” extensions offer practical advantages to our future selves: simpler maintenance, easier and less-risky upgrades, and cleaner code. Our Container extension does not solve other problems or change the behavior of TYPO3 in any other way. It just adds container elements, defined the same way as TYPO3’s core content element types. We can use containers for structuring content in multiple areas, like a two-column layout. We can use elements with pre-defined single-value fields and content areas for complex layout requirements—without resorting to flexforms for content. When Should I use Container Elements? --------------------------------------- Things you need to know about container elements: - A container element structures content areas within a page template (see Fig. 1), adding a section to a page that “breaks up” a single content area into—in this case—two columns. - They can be repeated and used multiple times on a single page: They are flexible and optional. - A container can always hold multiple child elements of different types. It can hold several elements in a single container area to group these elements—for example, to have a common background color or background image, or to group a block of content into one collapsible container. Or to introduce multiple content areas within a page template area. ![Backend view of container element](https://b13.com/fileadmin/_processed_/f/f/csm_Example-backend-view-of-a-page-with-our-container-element_846c9dbc69.webp) Figure 1: Example backend view of a page with our container element. ### When to Avoid Containers **We do not use container elements to build page structures**—that’s what the core backend layout concept is for. If you place all your content on a given page into a single container element (to be able to have a page layout with a sidebar, for example), you should consider adding a suitable backend layout instead. Because containers are optional, unlike layouts, they don’t “force” the page to have a given structure). If you don’t know what we’re talking about, consider yourself lucky. We have seen editor-headache-inducing setups like this too often to leave them unmentioned here. **We also do not use container elements to group or structure child content elements of a single type.** An easy example would be a list of contacts, a list of links, a slider element with multiple slides, or a list of teaser elements. If all possible child elements are of the same type, we use a different concept we call “list elements”. Yes, you guessed it, there is a TYPO3 extension for that, too. Stay tuned. We’re preparing to release that extension, too! So how do I get Container? ---------------------------- ### **Installation** Install the extension using Composer: `composer req b13/container` That’s it—you can start creating and using container elements. How Does it Work? ------------------- For a basic example, [see Part 2](https://b13.com/knowledge/flexible-containers-and-grids-for-typo3-part-two). In [Part 3](https://b13.com/knowledge/flexible-containers-and-grids-for-typo3-part-three) we will show an advanced example and explain all configuration options. Thinking of Upgrading to TYPO3 v10? ------------------------------------- Extensions such as Gridelements and Flux are just one of the areas you need to consider when planning your upgrade. We will be happy to help you analyze your instance for upgradeability, changes required, and cleanup for a smooth upgrade process. [ Read more about TYPO3 Upgrades ](https://b13.com/services/typo3-upgrade) ### Written by: ![Bild von David Steeb](https://b13.com/fileadmin/_processed_/a/d/csm_david_cf042ebb7f.webp) b13 Founder and CEO, David, is someone you’ll meet if you’re thinking about working with our agency. He is constantly learning new skills and is an influential part of our cutting-edge frontend practice. David Steeb CEO [ more from David Steeb ](https://b13.com/team/david-steeb) Related Articles ------------------ - ![Cartoon trophy character surrounded by hands giving thumbs up and a heart gesture, set against a gear-patterned background.](https://b13.com/fileadmin/_processed_/f/7/csm_T3ppy_Design_Kit_Headerbild_b51eb9dc31.webp) ### T3ppy Gives TYPO3 a Friendly Face 06 August 2026 | Florian “Flix” Keitgen TYPO3 is powerful—but it doesn’t have to feel impersonal. Meet T3ppy, our friendly companion for the backend. [ Read more: T3ppy Gives TYPO3 a Friendly Face ](https://b13.com/knowledge/t3ppy-design-kit) - ![Gavel labeled "AI" on a circuit-patterned background with yellow stars, symbolizing regulation or legislation related to artificial intelligence in the EU.](https://b13.com/fileadmin/_processed_/1/0/csm_EUAIAct_Headerbild_510724b3de.webp) ### AI Content in TYPO3: Labelling Needs Accountability 02 August 2026 | Benni Mack The EU AI Act brings the origins of AI-generated content into focus. AI Label marks AI-generated and AI-edited content in TYPO3 and records who signed off the published version—for… [ Read more: AI Content in TYPO3: Labelling Needs Accountability ](https://b13.com/knowledge/ai-content-in-typo3-labelling-needs-accountability) - ![A series of stylized figures in various poses, each with a distinctive orange hat, depict a progression from walking to standing still while looking at a phone, set against a purple grid background.](https://b13.com/fileadmin/_processed_/d/7/csm_QueuesDDEV_Headerbild_f640931350.webp) ### Better scalability with decoupled queues: How to set up RabbitMQ with TYPO3 10 April 2024 | Jochen Roth When built-in message transports hit their limits, RabbitMQ can provide TYPO3 with a scalable, robust message queue. [ Read more: Better scalability with decoupled queues: How to set up RabbitMQ with TYPO3 ](https://b13.com/knowledge/better-scalability-with-decoupled-queues-how-to-set-up-rabbitmq-with-typo3) - ![A cartoon character resembling a shield gives a thumbs up in front of a computer interface with various menu options.](https://b13.com/fileadmin/_processed_/e/6/csm_Header_cda1f80173.webp) ### Meet T3ppy: A New Era for Editorial Work in TYPO3 01 April 2026 | Florian “Flix” Keitgen T3ppy and the AiM extension bring AI directly into the TYPO3 backend—enhancing SEO, content quality, and workflows with centralized control. [ Read more: Meet T3ppy: A New Era for Editorial Work in TYPO3 ](https://b13.com/knowledge/meet-t3ppy-a-new-era-for-editorial-work-in-typo3) - ![Retro microphone illustration with a shopping cart icon in the background, symbolizing e-commerce or online shopping.](https://b13.com/fileadmin/_processed_/f/8/csm_Marketplace_Headerbild_ee1575614c.webp) ### Why TYPO3 Needs a Marketplace for Products 25 March 2026 | Florian “Flix” Keitgen A marketplace would make TYPO3 products more discoverable, easier to compare, and benefit both agencies and clients alike. [ Read more: Why TYPO3 Needs a Marketplace for Products ](https://b13.com/knowledge/why-typo3-needs-a-marketplace-for-products) - ![A hand holding a magnifying glass over a laptop screen displaying a webpage with an image and text elements.](https://b13.com/fileadmin/_processed_/e/5/csm_BackendUserSection_Headerbild_6093c842fd.webp) ### Unlocking TYPO3’s Hidden Gem: The Backend User Section (Doktype 6) 05 March 2026 | David Steeb Discover TYPO3’s underrated doktype 6 (Backend User Section) for secure internal previews, editor training, and prototyping. Learn real use cases, common pitfalls like 403 errors… [ Read more: Unlocking TYPO3’s Hidden Gem: The Backend User Section (Doktype 6) ](https://b13.com/knowledge/backend-user-section-in-typo3-uses-pitfalls-helper) - ![Two stylized web page designs featuring a user profile, image placeholders, and text sections, set against a light blue background.](https://b13.com/fileadmin/_processed_/2/0/csm_BackendPreview_Headerbild_b4c5799cfa.webp) ### Backend Previews With a System—Why We Built EXT:backendpreviews 09 February 2026 | David Steeb EXT:backendpreviews brings structure and consistency to content previews in the TYPO3 backend using Fluid templates, layouts, and partials. [ Read more: Backend Previews With a System—Why We Built EXT:backendpreviews ](https://b13.com/knowledge/backend-previews-with-a-system-why-we-built-extbackendpreviews) - ![A human hand shakes a robotic hand against a purple background with heart patterns, symbolizing collaboration between humans and technology.](https://b13.com/fileadmin/_processed_/6/2/csm_AIbotsLoveMarkdown_Headerbild_72fe5820d6.webp) ### The Internet Is No Longer Just for Humans—AI Bots Love Markdown 28 January 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. [ Read more: The Internet Is No Longer Just for Humans—AI Bots Love Markdown ](https://b13.com/knowledge/the-internet-is-no-longer-just-for-humans-ai-bots-love-markdown) - ![Several colorful web page mockups stacked together, showcasing different layouts and design elements against a purple background.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27 January 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. [ Read more: Camino—The Need for a Default Theme in TYPO3 Is Real ](https://b13.com/core-insights/blog/camino-the-need-for-a-default-theme-in-typo3-is-real) - ![Graphic featuring stylized representations of a tower with the text "T3CON25 Düsseldorf" prominently displayed in the center.](https://b13.com/fileadmin/_processed_/7/b/csm_T3CON2025_Headerbild_fc9c5cc53e.webp) ### T3CON25—One Step Closer to the Future of Content Management 10 December 2025 | Franzi Töpler T3CON25 showcased the future of TYPO3 with insights on TYPO3 v14, AI, digital sovereignty, and open-source solutions driving secure, modern web experiences. [ Read more: T3CON25—One Step Closer to the Future of Content Management ](https://b13.com/knowledge/shaping-the-future-of-content-management-t3con25)