Class RadzenRow
A flexbox row container component that horizontally arranges RadzenColumn components in a responsive 12-column grid layout. RadzenRow provides gap spacing, alignment, and justification controls for creating flexible, responsive page layouts. Serves as a container for RadzenColumn components, creating a horizontal flexbox layout where columns automatically wrap to the next line when their combined Size values exceed 12. Supports Gap and RowGap properties for spacing between columns and wrapped rows, AlignItems for vertical alignment (start, center, end, stretch, baseline), JustifyContent for horizontal distribution (start, center, end, space-between, space-around), and works seamlessly with RadzenColumn's breakpoint-specific sizing. Use AlignItems and JustifyContent from the base RadzenFlexComponent to control layout behavior.
Inheritance
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenRow : RadzenFlexComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableExamples
Basic row with columns and gap:
<RadzenRow Gap="1rem">
<RadzenColumn Size="4">Column 1</RadzenColumn>
<RadzenColumn Size="4">Column 2</RadzenColumn>
<RadzenColumn Size="4">Column 3</RadzenColumn>
</RadzenRow>Row with alignment and justification:
<RadzenRow AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Gap="2rem">
<RadzenColumn Size="3">Left</RadzenColumn>
<RadzenColumn Size="3">Right</RadzenColumn>
</RadzenRow>Constructors
RadzenRow()
A flexbox row container component that horizontally arranges RadzenColumn components in a responsive 12-column grid layout. RadzenRow provides gap spacing, alignment, and justification controls for creating flexible, responsive page layouts. Serves as a container for RadzenColumn components, creating a horizontal flexbox layout where columns automatically wrap to the next line when their combined Size values exceed 12. Supports Gap and RowGap properties for spacing between columns and wrapped rows, AlignItems for vertical alignment (start, center, end, stretch, baseline), JustifyContent for horizontal distribution (start, center, end, space-between, space-around), and works seamlessly with RadzenColumn's breakpoint-specific sizing. Use AlignItems and JustifyContent from the base RadzenFlexComponent to control layout behavior.
Declaration
public RadzenRow()Examples
Basic row with columns and gap:
<RadzenRow Gap="1rem">
<RadzenColumn Size="4">Column 1</RadzenColumn>
<RadzenColumn Size="4">Column 2</RadzenColumn>
<RadzenColumn Size="4">Column 3</RadzenColumn>
</RadzenRow>Row with alignment and justification:
<RadzenRow AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Gap="2rem">
<RadzenColumn Size="3">Left</RadzenColumn>
<RadzenColumn Size="3">Right</RadzenColumn>
</RadzenRow>Properties
Gap
Gets or sets the spacing between columns within the row. Accepts CSS length values (e.g., "1rem", "16px", "2em") or unitless numbers (interpreted as pixels). This sets the horizontal gap between column elements.
Declaration
[Parameter]
public string Gap { get; set; }Property Value
| Type | Description |
|---|---|
| string | The gap spacing as a CSS length value. Default is null (no gap). |
RowGap
Gets or sets the vertical spacing between wrapped rows when columns wrap to multiple lines. Accepts CSS length values (e.g., "1rem", "16px", "2em") or unitless numbers (interpreted as pixels). Only applicable when columns wrap due to exceeding the 12-column limit.
Declaration
[Parameter]
public string RowGap { get; set; }Property Value
| Type | Description |
|---|---|
| string | The row gap spacing as a CSS length value. Default is null (no row gap). |
Methods
BuildRenderTree(RenderTreeBuilder)
A flexbox row container component that horizontally arranges RadzenColumn components in a responsive 12-column grid layout. RadzenRow provides gap spacing, alignment, and justification controls for creating flexible, responsive page layouts. Serves as a container for RadzenColumn components, creating a horizontal flexbox layout where columns automatically wrap to the next line when their combined Size values exceed 12. Supports Gap and RowGap properties for spacing between columns and wrapped rows, AlignItems for vertical alignment (start, center, end, stretch, baseline), JustifyContent for horizontal distribution (start, center, end, space-between, space-around), and works seamlessly with RadzenColumn's breakpoint-specific sizing. Use AlignItems and JustifyContent from the base RadzenFlexComponent to control layout behavior.
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
GetComponentCssClass()
Gets the component CSS class.
Declaration
protected override string GetComponentCssClass()Returns
| Type | Description |
|---|---|
| string |
Overrides
GetComponentStyle()
Gets the component CSS style.
Declaration
protected string GetComponentStyle()Returns
| Type | Description |
|---|---|
| string |
GetStyle()
Gets the final CSS style rendered by the component. Combines it with a style custom attribute.
Declaration
protected string GetStyle()Returns
| Type | Description |
|---|---|
| string |