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.
These demos showcase a 12-column based responsive grid system with auto-layout column sizing, explicit column sizes (1-12), responsive sizing with breakpoint properties (SizeXS/SM/MD/LG/XL/XX), column wrapping with RowGap, offset positioning, responsive offsetting, visual column ordering with Order property, responsive ordering, nested layouts, and customizable gutters via the parent RadzenRow's Gap property.
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 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
All columns with a predefined Size
Responsive column sizes link
Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.
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.
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.
Responsive offsetting link
Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.
Column order link
The Order property is used to reorder columns visually.
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.
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.
Columns with a predefined Size
The second column contains a nested row with 4 columns.
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.
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT