TYPO3: Migration von Gridelements zu Container – Schritt für Schritt

Lange war Gridelements (öffnet in neuem Tab) die Lösung für verschachtelte Inhaltselemente in TYPO3. Inzwischen setzen viele Projekte auf EXT:container (öffnet in neuem Tab) von b13 – schlanker, näher am Core und für aktuelle TYPO3-Versionen verfügbar. Hier zeige ich, wie ich die Migration in einem Kundenprojekt durchgeführt habe.

Muss ich überhaupt migrieren?

Extension	Aktuelle Version	Unterstützte TYPO3-Versionen
Gridelements	13.1 (öffentlich)	12.4, 13.4
Gridelements 14	Priority Access	14
Container	4.1	13.4, 14.3
content_defender	3.5	11.5, 12.4, 13.4

Stand: Oktober 2026, laut Packagist. Solange du auf TYPO3 12 oder 13 bleibst, läuft Gridelements weiter.

Wer bei frei verfügbaren Extensions bleiben möchte, kommt spätestens mit TYPO3 14 an Container nicht vorbei. Die Migration passt gut in ein Upgrade-Projekt, weil die Seiten danach ohnehin getestet werden.

Vorbereitung

Schritt 1: Grid-Konfiguration übernehmen

In meinem Projekt waren die Grids als Datensätze in der Datenbank angelegt. Die Konfiguration eines Grids sah so aus:

mod.web_layout.BackendLayouts {
  exampleKey {
    title = Zweispaltig (Teaser-Texte lang)
    icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
    config {
      backend_layout {
        colCount = 2
        rowCount = 1
        rows {
          1 {
            columns {
              1 {
                name = Links
                colPos = 10
                allowed {
                  CType = header,text,textpic,image,textmedia,bullets,form_formframework
                }
              }
              2 {
                name = Rechts
                colPos = 20
                allowed {
                  CType = header,text,textpic,image,textmedia,bullets,form_formframework
                }
              }
            }
          }
        }
      }
    }
  }
}

Für den Container brauche ich daraus nur den Titel, die Beschreibung und die Spalten mit ihren colPos-Werten.

Schritt 2: Container registrieren

Die Registrierung kommt in die Datei Configuration/TCA/Overrides/tt_content.php deines Sitepackages:

<?php
// Configuration/TCA/Overrides/tt_content.php

\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\B13\Container\Tca\Registry::class)->configureContainer(
    (
        new \B13\Container\Tca\ContainerConfiguration(
            'container-5',                     // CType: container-{ID des Grids}
            'Zweispaltig (Teaser-Texte lang)', // Titel
            '',                                // Beschreibung
            [
                [
                    [
                        'name' => 'Links',
                        'colPos' => 10,
                        'allowed' => [
                            'CType' => 'header,text,textpic,image,textmedia,bullets,form_formframework',
                        ],
                    ],
                    [
                        'name' => 'Rechts',
                        'colPos' => 20,
                        'allowed' => [
                            'CType' => 'header,text,textpic,image,textmedia,bullets,form_formframework',
                        ],
                    ],
                ],
            ]
        )
    )
    // optional: eines der mitgelieferten Icons verwenden
    ->setIcon('container-2col')
);

Als CType nehme ich container- plus die ID des Grids aus der Datenbank – hier container-5. Das macht die Datenbank-Umstellung im nächsten Schritt besonders einfach. Die colPos-Werte übernehme ich aus dem Grid.

Die allowed-Einschränkungen funktionieren nur mit installiertem content_defender – ohne ihn werden sie ignoriert. Zusätzlich unterstützt content_defender disallowed und maxitems.

Schritt 3: Datenbank umstellen

Jetzt kommt der aufwendigere Teil. Vorher unbedingt das Backup prüfen!

Die Grids selbst werden zu Containern, indem nur der CType umgebaut wird:

UPDATE `tt_content`
SET `CType` = CONCAT('container-', `tx_gridelements_backend_layout`)
WHERE `CType` = 'gridelements_pi1';

Der Inhalt der Grids bekommt seine Spalte als colPos und den Container als tx_container_parent:

UPDATE `tt_content`
SET `colPos` = `tx_gridelements_columns`,
    `tx_container_parent` = `tx_gridelements_container`
WHERE `colPos` = -1;

Gridelements markiert Kindelemente mit colPos = -1. Das funktioniert auch mit verschachtelten Grids – jede Ebene wird gleich behandelt.

Schritt 4: Übersetzungen und Sortierung prüfen

Bei mehrsprachigen Seiten lohnt sich ein genauer Blick. Laut Container-Dokumentation gilt:

• Ein Kindelement hat dieselbe pid wie sein Container.
• tx_container_parent eines übersetzten Kindelements zeigt nicht auf den übersetzten Container, sondern auf den Original-Container der Standardsprache.
• Die Sortierung (sorting) gilt seitenweit.

Container bringt CLI-Befehle mit, die genau solche Inkonsistenzen finden und beheben:

# Sortierung der Container-Kindelemente prüfen
vendor/bin/typo3 container:sorting

# … und z. B. auf Seite 123 korrigieren
vendor/bin/typo3 container:sorting --apply 123

# Container-Zuordnung übersetzter Kindelemente korrigieren
vendor/bin/typo3 container:fixContainerParentForConnectedMode

Ich empfehle, nach der SQL-Migration zumindest die Prüfbefehle laufen zu lassen und mehrsprachige Seiten im Backend und Frontend durchzuklicken.

Schritt 5: Frontend-Templates

Bei Gridelements wurde das Markup oft per TypoScript gebaut – so auch bei mir:

tt_content {
    gridelements_pi1.20.10.setup {
        5 < lib.gridelements.defaultGridSetup
        5 {
            columns {
                10 < .default
                10 {
                    wrap = <div class="longfacts-spalte-1">|</div>
                }

                20 < .10
                20 {
                    wrap = <div class="longfacts-spalte-2">|</div>
                }
            }

            wrap = <section id="longfacts" class="wrapper style2"><div class="inner"><div class="posts"><section class="facts-gesamt">|</section></div></div></section>
        }
    }
}

Daraus wird ein Fluid-Template. Der ContainerProcessor stellt für jede Spalte eine Variable children_<colPos> bereit:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default"/>
<f:section name="Main">
    <section id="longfacts" class="wrapper style2">
        <div class="inner">
            <div class="posts">
                <section class="facts-gesamt">
                    <div class="longfacts-spalte-1">
                        <f:if condition="{children_10}">
                            <f:for each="{children_10}" as="child">
                                <f:format.raw>{child.renderedContent}</f:format.raw>
                            </f:for>
                        </f:if>
                    </div>
                    <div class="longfacts-spalte-2">
                        <f:if condition="{children_20}">
                            <f:for each="{children_20}" as="child">
                                <f:format.raw>{child.renderedContent}</f:format.raw>
                            </f:for>
                        </f:if>
                    </div>
                </section>
            </div>
        </div>
    </section>
</f:section>
</html>

Damit die Templates von Fluid Styled Content (Layouts, Partials) weiter funktionieren, definiere ich einmal eine Basis-Konfiguration für alle Container:

lib.containerElement =< lib.contentElement
lib.containerElement {
    layoutRootPaths {
        100 = EXT:fluid_styled_content/Resources/Private/Layouts
        110 = EXT:theme/Resources/Private/Layouts/Container
    }

    templateRootPaths {
        100 = EXT:fluid_styled_content/Resources/Private/Templates
        110 = EXT:theme/Resources/Private/Templates/Container
    }

    partialRootPaths {
        100 = EXT:fluid_styled_content/Resources/Private/Partials
        110 = EXT:theme/Resources/Private/Partials/Container
    }

    dataProcessing {
        10 = B13\Container\DataProcessing\ContainerProcessor
    }
}

Für jeden Container genügt dann:

tt_content.container-5 < lib.containerElement
tt_content.container-5 {
    templateName = Container-5
}

Das Template liegt in diesem Beispiel unter EXT:theme/Resources/Private/Templates/Container/Container-5.html.

Schritt 6: Aufräumen

Wenn alle Seiten korrekt aussehen:

Und schon sind alle ehemaligen Gridelements Container-Elemente.