Class RadzenColumn

A responsive grid column component used within RadzenRow to create flexible, responsive layouts based on a 12-column grid system. RadzenColumn provides breakpoint-specific sizing, offsetting, and ordering capabilities for building adaptive interfaces. Must be used inside a RadzenRow component. The column width is specified as a value from 1-12, representing the number of grid columns to span. Supports responsive design through breakpoint-specific properties including Size for default column width (1-12), SizeXS/SM/MD/LG/XL/XX for breakpoint-specific widths, Offset for number of columns to skip before this column (creates left margin), OffsetXS/SM/MD/LG/XL/XX for breakpoint-specific offsets, Order to control visual order of columns (useful for reordering on different screen sizes), and OrderXS/SM/MD/LG/XL/XX for breakpoint-specific ordering. Columns automatically fill available space when no size is specified, and wrap to new lines when the total exceeds 12.

Inheritance
object
ComponentBase
RadzenComponent
RadzenComponentWithChildren
RadzenColumn
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenColumn : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Examples

Basic columns with fixed sizes:

<RadzenRow>
    <RadzenColumn Size="6">Half width</RadzenColumn>
    <RadzenColumn Size="6">Half width</RadzenColumn>
</RadzenRow>

Responsive columns that adapt to screen size:

<RadzenRow>
    <RadzenColumn SizeXS="12" SizeSM="6" SizeMD="4" SizeLG="3">
        Responsive content: Full width on mobile, half on tablet, third on desktop, quarter on large screens
    </RadzenColumn>
</RadzenRow>

Columns with offset and ordering:

<RadzenRow>
    <RadzenColumn Size="6" Offset="3">Centered with offset</RadzenColumn>
    <RadzenColumn Size="6" Order="2" OrderMD="1">Reordered on medium screens</RadzenColumn>
</RadzenRow>

Constructors

RadzenColumn()

A responsive grid column component used within RadzenRow to create flexible, responsive layouts based on a 12-column grid system. RadzenColumn provides breakpoint-specific sizing, offsetting, and ordering capabilities for building adaptive interfaces. Must be used inside a RadzenRow component. The column width is specified as a value from 1-12, representing the number of grid columns to span. Supports responsive design through breakpoint-specific properties including Size for default column width (1-12), SizeXS/SM/MD/LG/XL/XX for breakpoint-specific widths, Offset for number of columns to skip before this column (creates left margin), OffsetXS/SM/MD/LG/XL/XX for breakpoint-specific offsets, Order to control visual order of columns (useful for reordering on different screen sizes), and OrderXS/SM/MD/LG/XL/XX for breakpoint-specific ordering. Columns automatically fill available space when no size is specified, and wrap to new lines when the total exceeds 12.

Declaration
public RadzenColumn()
Examples

Basic columns with fixed sizes:

<RadzenRow>
    <RadzenColumn Size="6">Half width</RadzenColumn>
    <RadzenColumn Size="6">Half width</RadzenColumn>
</RadzenRow>

Responsive columns that adapt to screen size:

<RadzenRow>
    <RadzenColumn SizeXS="12" SizeSM="6" SizeMD="4" SizeLG="3">
        Responsive content: Full width on mobile, half on tablet, third on desktop, quarter on large screens
    </RadzenColumn>
</RadzenRow>

Columns with offset and ordering:

<RadzenRow>
    <RadzenColumn Size="6" Offset="3">Centered with offset</RadzenColumn>
    <RadzenColumn Size="6" Order="2" OrderMD="1">Reordered on medium screens</RadzenColumn>
</RadzenRow>

Properties

Offset

Gets or sets the number of columns to skip before this column (left margin spacing). Creates empty space to the left by pushing the column to the right.

Declaration
[Parameter]
public int? Offset { get; set; }
Property Value
Type Description
int?

The number of grid columns to offset (0-12). Default is null (no offset).

OffsetLG

Gets or sets the offset for large screens (breakpoint ≥ 1024px).

Declaration
[Parameter]
public int? OffsetLG { get; set; }
Property Value
Type Description
int?

The number of grid columns to offset (0-12) on LG screens.

OffsetMD

Gets or sets the offset for medium screens (breakpoint ≥ 768px).

Declaration
[Parameter]
public int? OffsetMD { get; set; }
Property Value
Type Description
int?

The number of grid columns to offset (0-12) on MD screens.

OffsetSM

Gets or sets the offset for small screens (breakpoint ≥ 576px).

Declaration
[Parameter]
public int? OffsetSM { get; set; }
Property Value
Type Description
int?

The number of grid columns to offset (0-12) on SM screens.

OffsetXL

Gets or sets the offset for extra large screens (breakpoint ≥ 1280px).

Declaration
[Parameter]
public int? OffsetXL { get; set; }
Property Value
Type Description
int?

The number of grid columns to offset (0-12) on XL screens.

OffsetXS

Gets or sets the offset for extra small screens (breakpoint < 576px).

Declaration
[Parameter]
public int? OffsetXS { get; set; }
Property Value
Type Description
int?

The number of grid columns to offset (0-12) on XS screens.

OffsetXX

Gets or sets the offset for extra extra large screens (breakpoint ≥ 1536px).

Declaration
[Parameter]
public int? OffsetXX { get; set; }
Property Value
Type Description
int?

The number of grid columns to offset (0-12) on XX screens.

Order

Gets or sets the visual display order of this column within its row. Allows reordering columns without changing their position in markup. Values can be 0-12 or "first"/"last".

Declaration
[Parameter]
public string Order { get; set; }
Property Value
Type Description
string

The column order (0-12, "first", or "last"). Default is null (document order).

OrderLG

Gets or sets the column order for large screens (breakpoint ≥ 1024px).

Declaration
[Parameter]
public string OrderLG { get; set; }
Property Value
Type Description
string

The column order (0-12, "first", or "last") on LG screens.

OrderMD

Gets or sets the column order for medium screens (breakpoint ≥ 768px).

Declaration
[Parameter]
public string OrderMD { get; set; }
Property Value
Type Description
string

The column order (0-12, "first", or "last") on MD screens.

OrderSM

Gets or sets the column order for small screens (breakpoint ≥ 576px).

Declaration
[Parameter]
public string OrderSM { get; set; }
Property Value
Type Description
string

The column order (0-12, "first", or "last") on SM screens.

OrderXL

Gets or sets the column order for extra large screens (breakpoint ≥ 1280px).

Declaration
[Parameter]
public string OrderXL { get; set; }
Property Value
Type Description
string

The column order (0-12, "first", or "last") on XL screens.

OrderXS

Gets or sets the column order for extra small screens (breakpoint < 576px).

Declaration
[Parameter]
public string OrderXS { get; set; }
Property Value
Type Description
string

The column order (0-12, "first", or "last") on XS screens.

OrderXX

Gets or sets the column order for extra extra large screens (breakpoint ≥ 1536px).

Declaration
[Parameter]
public string OrderXX { get; set; }
Property Value
Type Description
string

The column order (0-12, "first", or "last") on XX screens.

Size

Gets or sets the default column width as a value from 1-12 in the grid system. If not specified, the column will automatically expand to fill available space.

Declaration
[Parameter]
public int? Size { get; set; }
Property Value
Type Description
int?

The number of grid columns to span (1-12), or null for auto width.

SizeLG

Gets or sets the column width for large screens (breakpoint ≥ 1024px). Overrides the default Size on desktops and larger devices.

Declaration
[Parameter]
public int? SizeLG { get; set; }
Property Value
Type Description
int?

The number of grid columns to span (1-12) on LG screens.

SizeMD

Gets or sets the column width for medium screens (breakpoint ≥ 768px). Overrides the default Size on tablets and larger devices.

Declaration
[Parameter]
public int? SizeMD { get; set; }
Property Value
Type Description
int?

The number of grid columns to span (1-12) on MD screens.

SizeSM

Gets or sets the column width for small screens (breakpoint ≥ 576px). Overrides the default Size on small tablets and larger devices.

Declaration
[Parameter]
public int? SizeSM { get; set; }
Property Value
Type Description
int?

The number of grid columns to span (1-12) on SM screens.

SizeXL

Gets or sets the column width for extra large screens (breakpoint ≥ 1280px). Overrides the default Size on large desktops and larger devices.

Declaration
[Parameter]
public int? SizeXL { get; set; }
Property Value
Type Description
int?

The number of grid columns to span (1-12) on XL screens.

SizeXS

Gets or sets the column width for extra small screens (breakpoint < 576px). Overrides the default Size on mobile devices.

Declaration
[Parameter]
public int? SizeXS { get; set; }
Property Value
Type Description
int?

The number of grid columns to span (1-12) on XS screens.

SizeXX

Gets or sets the column width for extra extra large screens (breakpoint ≥ 1536px). Overrides the default Size on very large displays.

Declaration
[Parameter]
public int? SizeXX { get; set; }
Property Value
Type Description
int?

The number of grid columns to span (1-12) on XX screens.

Methods

BuildRenderTree(RenderTreeBuilder)

A responsive grid column component used within RadzenRow to create flexible, responsive layouts based on a 12-column grid system. RadzenColumn provides breakpoint-specific sizing, offsetting, and ordering capabilities for building adaptive interfaces. Must be used inside a RadzenRow component. The column width is specified as a value from 1-12, representing the number of grid columns to span. Supports responsive design through breakpoint-specific properties including Size for default column width (1-12), SizeXS/SM/MD/LG/XL/XX for breakpoint-specific widths, Offset for number of columns to skip before this column (creates left margin), OffsetXS/SM/MD/LG/XL/XX for breakpoint-specific offsets, Order to control visual order of columns (useful for reordering on different screen sizes), and OrderXS/SM/MD/LG/XL/XX for breakpoint-specific ordering. Columns automatically fill available space when no size is specified, and wrap to new lines when the total exceeds 12.

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

Implements

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

Learn More

Download Now