Back to Index

Layout-System

EN DE TR

Standard-Raster

Das Basis-Rastersystem unterstützt standardmäßig bis zu 4 Spalten.

Spalten gleicher Breite

1
2
3

Responsive Raster

1 Spalte auf Mobilgeräten, 2 auf Tablets, 4 auf Desktops.

1
2
3
4

Erweitertes Raster

Große Projekte

Ein leistungsstarkes 12-Spalten-Rastersystem für komplexe Layouts.

12 Spalten

1
2
3
4
5
6
7
8
9
10
11
12

Spalten-Spanning

Span 8
Span 4
Span 4
Span 4
Span 4
Span 6
Span 6

Responsive Spanning

Hauptinhalt (12 -> 8 Spalten)
Seitenleiste (12 -> 4 Spalten)

Gängige Layouts

Dashboard-Layout

Seitenleiste
Kopfzeile

Blog / Artikel-Layout

Kopfzeile
Linke Seitenleiste
Hauptinhalt
Rechte Seitenleiste
Fußzeile

Utility-Helfer

Additive Utility-Erweiterungen fuer Accessibility, Print, Textfluss, Groessen, Flex-Items und Seitenverhaeltnisse.

Screenreader & Druck

Dieser Hinweis ist nur auf dem Bildschirm sichtbar.
Dieser Hinweis erscheint nur im Druck.

Pointer Events & Textauswahl

Dieser Text kann nicht markiert werden.

Ein Klick markiert die komplette Zeile.

Whitespace & Zeilenumbrueche

Zeile eins Zeile zwei Zeile drei
kundenservice-mit-einer-sehr-langen-adresse@beispiel-anwendung-mit-langem-namen.de
ORDER-2026-SEHR-LANGE-KENNUNG-OHNE-LEERZEICHEN-FUER-ONE-LINE-TESTS

Min-Groessen, Order, Self & Aspect Ratio

Seite
Flexibler Inhaltsbereich mit ak-min-w-0 fuer stabileres Overflow-Verhalten in Flex-Layouts.
Center
1:1
16:9