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

Object

ComponentBase

RadzenComponent

RadzenComponentWithChildren

RadzenFlexComponent

RadzenRow

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 to this section

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

ColumnsLink to this section

Gets or sets how many columns (1-12) fit on each line of the row by default. Applies to child RadzenColumn components that do not set a Size for the current breakpoint; a column Size always takes precedence.

Declaration
public int? Columns { get; set; }
Property Value
Type Description
int?Gets or sets how many columns (1-12) fit on each line of the row by default. Applies to child RadzenColumn components that do not set a Size for the current breakpoint; a column Size always takes precedence.

ColumnsLGLink to this section

Overrides the default Columns on desktops and larger devices.

Declaration
public int? ColumnsLG { get; set; }
Property Value
Type Description
int?Overrides the default Columns on desktops and larger devices.

ColumnsMDLink to this section

Overrides the default Columns on tablets and larger devices.

Declaration
public int? ColumnsMD { get; set; }
Property Value
Type Description
int?Overrides the default Columns on tablets and larger devices.

ColumnsSMLink to this section

Overrides the default Columns on small tablets and larger devices.

Declaration
public int? ColumnsSM { get; set; }
Property Value
Type Description
int?Overrides the default Columns on small tablets and larger devices.

ColumnsXLLink to this section

Overrides the default Columns on large desktops and larger devices.

Declaration
public int? ColumnsXL { get; set; }
Property Value
Type Description
int?Overrides the default Columns on large desktops and larger devices.

ColumnsXSLink to this section

Overrides the default Columns on mobile devices.

Declaration
public int? ColumnsXS { get; set; }
Property Value
Type Description
int?Overrides the default Columns on mobile devices.

ColumnsXXLink to this section

Overrides the default Columns on very large displays.

Declaration
public int? ColumnsXX { get; set; }
Property Value
Type Description
int?Overrides the default Columns on very large displays.

GapLink to this section

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 to this section

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 to this section

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

GetComponentCssClassLink to this section

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

GetComponentStyleLink to this section

Gets the component CSS style.

Declaration
protected string GetComponentStyle()
Returns
Type Description
string

GetStyleLink to this section

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 🗙