Radzen Blazor Components

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.

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 link

If column Size is not specified, the column width is automatically calculated with respect to the remaining free space available.

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

Column sizes link

When setting column Size, make sure that the total sum of all column sizes is not greater than 12. Otherwise, columns might wrap to a second row.

One column with a predefined Size

Size="4"
Auto
Auto

All columns with a predefined Size

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

Responsive column sizes link

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"

Column wrapping link

4 RadzenColumns with Size="6" render on two lines in a RadzenRow. Use RowGap property to specify the vertical spacing between columns on two or more lines in a row.

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

Column offset link

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 link

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 link

The Order property is used to reorder columns visually.

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

Responsive column ordering link

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 link

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

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 link

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

Supercharge your Blazor development with 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.

open_in_new Learn More
>Radzen Blazor Studio

Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Fluent
  • Material 3 Dark
  • Material Dark
  • Fluent Dark

Free Themes

  • Material
  • Standard
  • Default
  • Humanistic
  • Software
  • Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙