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

Whether you prefer a standalone environment or integration directly within Visual Studio, Radzen provides a powerful toolkit to increase development speed, reduce repetitive coding, and focus on building exceptional applications.

Pro

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.

Learn More
New

Radzen Blazor for Visual Studio

Radzen Blazor for Visual Studio extension streamlines Blazor development within the Visual Studio environment. The Blazor extension you need to boost productivity!

>Radzen Blazor Studio

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

Demos Configuration

Premium Themes

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

Free Themes

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