GitHub

Column

The RadzenColumn component is used within a RadzenRow to create a structured grid layout. Without the RadzenRow component, the RadzenColumn would not be rendered correctly.

Columns

RadzenColumns are positioned on a 12-column based responsive grid.

1
2
3
4
5
6
7
8
9
10
11
12

Auto-layout columns

Column 1 of 4
Column 2 of 4
Column 3 of 4
Column 4 of 4

One column with a predefined Size

Size="4"
Auto
Auto

All columns with a predefined Size

Size="4"
Size="5"
Size="3"

Responsive sizes

Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.

Size="12" SizeXS="11" SizeSM="10" SizeMD="9" SizeLG="8" SizeXL="7" SizeXX="6"

Wrapping

4 RadzenColumns with Size="6" render on two lines in a RadzenRow.

Size="6"
Size="6"
Size="6"
Size="6"

Column Offset

The Offset property moves the column to the right following the grid column layout.

E.g. Offset="3" offsets 3 columns to the right.

Size="6" Offset="3"

Responsive offsetting

Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.

Offset="0" OffsetXS="1" OffsetSM="2" OffsetMD="3" OffsetLG="4" OffsetXL="5" OffsetXX="6"

Column Order

The Order property is used to reorder columns visually.

Column 1, Order="3"
Column 2, Order="1"
Column 3, Order="2"

Responsive ordering

You can reorder columns on different screen sizes. Resize your browser window to see how the columns reorder. See Breakpoints to learn more.

Order="1", OrderMD="4" OrderLG="6" OrderXL="8"
Order="3"
Order="5"
Order="7"

Nested layouts

Auto-layout columns

Example with 3 levels of nesting. You can nest rows and columns indefinitely.

Level 1
Level 2
Level 3
Level 3
Level 2

Columns with a predefined Size

The second column contains a nested row with 4 columns.

Size="3"
Auto size
Size="3"
Size="6"
Size="6"
Size="6"
Size="3"

Gutters

By default, the spacing between columns is set to 1rem, via the --rz-gap CSS variable. Spacing between coulmns can be controlled by setting the Gap property of the parent RadzenRow component.

1
2
3
4
5
6
7
8
9
10
11
12
Column 1 of 3
Column 2 of 3
Column 3 of 3

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

Source Code licensed under MIT

An error has occurred. This application may no longer respond until reloaded. Reload 🗙