---
name: Row
description: Onesown Blazor Komponente Row (FlexGrid). Verwende diesen Skill wenn du die Row-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# Row

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** FlexGrid  
**Basisklasse:** `OoComponentBase`  

Horizontaler Flex-Container für das 12-Spalten-Rastersystem. Nimmt Column-Kinder auf und steuert deren Ausrichtung, Umbruch, Reihenfolge und Abstände. Wird typischerweise innerhalb eines Stack- oder Seiten-Layouts eingesetzt.

**Live-Demo:** https://components.schini.com/demo/row  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``AlignItems`` | ``OoAlignItems`` | ``OoAlignItems.Normal`` | Vertikale Ausrichtung aller Kindelemente (CSS align-items). Mögliche Werte: Normal, Start, Center, End, Stretch, Baseline. Standard: Normal. |
| ``AlignSelf`` | ``OoAlignSelf`` | ``OoAlignSelf.Normal`` | Überschreibt align-items der übergeordneten Row nur für diese Row selbst (CSS align-self). Standard: Normal. |
| ``JustifyContent`` | ``OoJustifyContent`` | ``OoJustifyContent.Normal`` | Horizontale Verteilung der Kindelemente (CSS justify-content). Mögliche Werte: Normal, Start, Center, End, SpaceBetween, SpaceAround, SpaceEvenly, Stretch. Standard: Normal. |
| ``Wrap`` | ``OoWrap`` | ``OoWrap.NoWrap`` | Umbruchverhalten. Standard: NoWrap – alle Spalten bleiben in einer Zeile. Wrap lässt Spalten bei zu wenig Platz in die nächste Zeile umbrechen; WrapReverse bricht in umgekehrter Richtung um. |
| ``Reverse`` | ``bool`` |  | Dreht die visuelle Reihenfolge der Kindelemente um (CSS row-reverse), ohne den DOM zu verändern. Standard: false. |
| ``Gap`` | ``string`` | ``"0px"`` | Abstand zwischen den Kindelementen – akzeptiert jeden gültigen CSS-Wert (z. B. "0.5rem", "8px") oder -Token (z. B. @OoGaps.S4). Standard: 0px. |
| ``ChildContent`` | ``RenderFragment`` |  | Inhalt der Row. Nimmt typischerweise Column-Kinder auf. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Standardverwendung: Row mit Column-Kindern für responsive Layouts im 12-Spalten-Raster
- Spalten umbrechen lassen: Wrap="OoWrap.Wrap" (Standard ist NoWrap – alle Spalten bleiben in einer Zeile)
- Spalten vertikal ausrichten: AlignItems="OoAlignItems.Center" zentriert alle Kinder vertikal
- Einzelne Spalte anders ausrichten: Column-Kind mit AlignSelf-Parameter verwenden
- Reihenfolge umkehren: Reverse="true" dreht die visuelle Reihenfolge (row-reverse) ohne DOM-Änderung
- Abstände zwischen Spalten: Gap="@OoSpace.S4"; Standard ist 0px (kein Gap)