Layout

Container, Cluster und responsive Spalten.

Das zwölfspaltige Flex-Grid arbeitet mobile-first. Ziehe das Browserfenster schmaler, um die Breakpoints direkt zu sehen.

Container

Standard, schmal, breit und fluid.

.container · maximal 72rem
.container--narrow · maximal 48rem
.container--wide · maximal 90rem
.container--fluid · volle Breite

Gleichmäßige Spalten

Direkte Kinder eines Clusters teilen den verfügbaren Platz automatisch.

Auto
Auto
Auto
Auto

Zwölf Spalten

Explizite Breiten mit col-*.

12 / 12
6 / 12
6 / 12
4 / 12
4 / 12
4 / 12
3 / 12
9 / 12
2
8
2

Responsive

Volle Breite auf kleinen Screens, 6 Spalten ab S und 4 ab L.

col-12 col-6-s col-4-l
col-12 col-6-s col-4-l
col-12 col-6-s col-4-l

Content und Restbreite

col-content folgt dem Inhalt, col-auto füllt den Rest.

Logo
Verfügbarer Raum
Aktion

Ausrichtung und Reihenfolge

Cluster steuern Haupt- und Querachse sowie responsive Reihenfolge.

Zentriert

Mitte

Space between

Links
Rechts

Reihenfolge

DOM 1, visuell zuletzt
DOM 2, visuell zuerst