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

Source Code licensed under MIT

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