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.
Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.
4 RadzenColumns with Size="6" render on two lines in a RadzenRow.
E.g. Offset="3" offsets 3 columns to the right.
Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.
You can reorder columns on different screen sizes. Resize your browser window to see how the columns reorder. See Breakpoints to learn more.
Example with 3 levels of nesting. You can nest rows and columns indefinitely.
The second column contains a nested row with 4 columns.
1rem
, via the --rz-gap
CSS variable. Spacing between coulmns can be controlled by setting the Gap
property of the parent RadzenRow
component.Source Code licensed under MIT