RadzenRow Class

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

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenRow : RadzenFlexComponent, IComponent, IHandleEvent, IHandleAfterRender

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>

Constructors

RadzenRowlink

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()

Properties

Gaplink

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
public string Gap { get; set; }
Property Value
Type Description
stringGets 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.

RowGaplink

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
public string RowGap { get; set; }
Property Value
Type Description
stringGets 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.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

GetComponentStylelink

Gets the component CSS style.

Declaration
protected string GetComponentStyle()
Returns
Type Description
string

GetStylelink

Gets the final CSS style rendered by the component. Combines it with a style custom attribute.

Declaration
protected string GetStyle()
Returns
Type Description
string
An error has occurred. This app may no longer respond until reloaded. Reload 🗙