Grid Layout

Das grid-Block-Tag erstellt einen CSS-Grid-Container zum Anordnen von Elementen in Spalten. Es unterstützt zwei Modi: auto-fit (Elemente werden automatisch entsprechend dem verfügbaren Platz umgebrochen) und fixed columns (eine bestimmte Anzahl von Spalten mit responsiven Breakpoints).

Das grid Layout-Tag nutzt CSS-Container-Queries, sodass sich die Breakpoints nach der Breite des Containers und nicht nach dem Viewport richten. Das bedeutet, dass sich das Raster unabhängig von seiner Platzierung (Seitenleiste, Modal, Karte usw.) korrekt anpasst.

WCAG AA
Block Tag

Funktionen

  • Auto-fit Modus: Die Elemente werden entsprechend dem verfügbaren Platz umgebrochen. Mittels min kann die Mindestbreite für die Elemente festgelegt werden (beliebige CSS-Einheit: px, rem, em)..

  • Feste Spalten: Mit cols (1–6) kann eine bestimmte Spaltenanzahl mit automatischen Responsive-Breakpoints festgelegt werden.

  • Gap: Gleichmäßiger Abstand zwischen den Elementen (xs/s/m/l/xl).

  • fixed: Deaktiviert die automatischen Responsive-Breakpoints und verwendet die genaue Spaltenanzahl.

Verwendung

Die Komponente wird über das grid Tag eingebunden.

{% load layout_tags %} <!-- Auto-fit mode: items wrap based on available space --> {% grid gap="l" %} <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> {% endgrid %} <!-- Auto-fit with custom minimum width (supports px, rem, em, etc.) --> {% grid min="15rem" gap="m" %} <div>Card 1</div> <div>Card 2</div> {% endgrid %} <!-- Fixed columns with responsive breakpoints (adapts to container width) --> {% grid cols=3 gap="l" %} <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> {% endgrid %} <!-- Fixed columns without responsive behavior (always 4 columns) --> {% grid cols=4 fixed=True %} <div>Always 4 columns</div> {% endgrid %}

Parameter

Laden…

config (GridConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
cols int

Anzahl der Spalten (1–6). Wenn nicht festgelegt, wird auto-fit verwendet.

 None False
gap str

Abstand zwischen den Rasterelementen (xs|s|m|l|xl).

 "m" False
min str

Mindestbreite eines Elements für den „auto-fit“ Modus (beliebige CSS-Einheit: px, rem, em usw.).

 "250px" False
fixed bool

Responsive-Breakpoints deaktivieren (immer die genaue Spaltenanzahl verwenden).

 False False
{% load layout_tags %} {# Auto-fit mode - items wrap based on available space #} {% grid gap="l" %} <div>Item 1</div> <div>Item 2</div> {% endgrid %} {# Auto-fit with custom minimum width #} {% grid min="15rem" gap="m" %} ... {% endgrid %} {# Fixed columns with responsive breakpoints (adapts to container width) #} {% grid cols=3 gap="m" %} ... {% endgrid %} {# Fixed columns without responsive behavior (always 4 columns) #} {% grid cols=4 fixed=True %} ... {% endgrid %}

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Grid-Container wird mithilfe von CSS Grid als <div>-Element dargestellt.

  • Die Reihenfolge der Inhalte im DOM entspricht der visuellen Lesereihenfolge.

  • Screenreader geben die Elemente in ihrer Reihenfolge im Quellcode wieder, unabhängig vom visuellen Layout.

Verwandte Themen