TYPO3 Fluid: Einträge in Spalten ausgeben

Eine Liste – Teammitglieder, Produkte, Referenzen – soll nicht untereinander, sondern in Reihen zu je drei Spalten erscheinen. Früher hieß die Antwort fast immer: die Liste mit v:iterator.chunk in Dreiergruppen teilen und jede Gruppe in eine eigene Zeile schreiben. Heute ist das selten nötig.

Geprüft haben wir alles am 1. Oktober 2026 mit Fluid 5.3.2 (TYPO3 14.3.7). Einen Chunk-ViewHelper bringt Fluid selbst nicht mit; f:split zerlegt nur Texte, keine Listen.

Ein Grid verteilt die Einträge selbst auf die Spalten. Die Schleife bleibt flach, und das Raster passt sich der Breite an – auf dem Telefon eine Spalte, ab Tablet drei. Mit Bootstrap 5:

<div class="row row-cols-1 row-cols-md-3 g-4">
    <f:for each="{eintraege}" as="eintrag">
        <div class="col">{eintrag.titel}</div>
    </f:for>
</div>

Ohne Framework leistet CSS Grid dasselbe:

.liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.5rem;
}

Mit Gruppen aus dem Template wäre die Spaltenzahl dagegen fest: Drei Einträge pro Zeile bleiben drei, auch auf dem Telefon.

Manchmal braucht jede Reihe ein eigenes Element – etwa für einen Slider, in dem jede Folie drei Einträge zeigt. Dafür gibt es v:iterator.chunk aus der Extension VHS. VHS wird weiter gepflegt: Version 8.0.0 vom Juli 2026 unterstützt laut ihrer composer.json TYPO3 12, 13 und 14.3.

composer require fluidtypo3/vhs

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:for each="{eintraege -> v:iterator.chunk(count: 3)}" as="gruppe">
    <div class="row">
        <f:for each="{gruppe}" as="eintrag">
            <div class="col-md-4">{eintrag.titel}</div>
        </f:for>
    </div>
</f:for>

Mit fixed: 1 bedeutet count die Zahl der Gruppen statt der Einträge je Gruppe – praktisch für drei Spalten, die von oben nach unten gefüllt werden. preserveKeys: 1 behält die ursprünglichen Schlüssel.

Wer VHS nur für diese eine Aufgabe installieren würde, kommt mit wenigen Zeilen im eigenen Sitepackage aus. Die Methode getContentArgumentName() sorgt dafür, dass auch die Schreibweise mit Pfeil funktioniert:

<?php

declare(strict_types=1);

namespace Vendor\Sitepackage\ViewHelpers;

use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;

final class ChunkViewHelper extends AbstractViewHelper
{
    public function initializeArguments(): void
    {
        $this->registerArgument('subject', 'array', 'Liste, die aufgeteilt wird');
        $this->registerArgument('count', 'int', 'Einträge je Gruppe', true);
    }

    public function getContentArgumentName(): string
    {
        return 'subject';
    }

    public function render(): array
    {
        return array_chunk($this->renderChildren() ?? [], max(1, (int)$this->arguments['count']));
    }
}

Im Template den Namespace anmelden und wie VHS benutzen:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:my="http://typo3.org/ns/Vendor/Sitepackage/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:for each="{eintraege -> my:chunk(count: 3)}" as="gruppe">
    …
</f:for>

Vendor\Sitepackage steht für den Namespace Ihres Sitepackages. Den ViewHelper haben wir mit Fluid 5.3.2 getestet; getContentArgumentName() gibt es auch in Fluid 4 (TYPO3 13).

• TYPO3-Dokumentation: ViewHelper f:for
• TYPO3-Dokumentation: ViewHelper f:split
• fluidtypo3/vhs auf Packagist
• Quelltext von v:iterator.chunk in VHS 8.0.0
• Fluid-Dokumentation: eigene ViewHelper
• Bootstrap 5.3: Grid und row-cols

Fluid-Beispiele und eigener ViewHelper am 1. Oktober 2026 mit Fluid 5.3.2 (TYPO3 14.3.7) geprüft; die Angaben zu VHS stammen aus Quelltext und composer.json der Version 8.0.0.