Responsive page layout

RadzenStack, RadzenRow, and RadzenColumn components can be used to quickly setup a responsive layout and align the UI elements on your page into columns and rows.

RadzenStack

The RadzenStack component is used to arrange elements in a vertical or horizontal stack. You can use it to quickly setup responsive forms or page layouts. In pages it is often used to create a centered layout with muliple rows of content.

RadzenStack properties

The most commonly used RadzenStack properties are:

See all congifuration options in the RadzenStack component demo and RadzenStack API reference.

RadzenRow

The RadzenRow component is used to create a row in a responsive layout. It is primarily used in conjunction with RadzenColumn component.

RadzenRow properties

The most commonly used RadzenRow properties are:

Property	Type	Values	Description
Gap	string	Accepts length unit values, e.g. 2rem or 10px. Default is 1rem.	The size of the vertical gap (gutter) between the columns in a RadzenRow.
RowGap	string	Accepts length unit values, e.g. 2rem or 10px. Default is 1rem.	The size of the horizontal gap (gutter) between two lines of columns in a RadzenRow.

See all congifuration options in the RadzenRow component demo and RadzenRow API reference.

RadzenColumn

The RadzenColumn component is always used within a RadzenRow. Without the RadzenRow component, the RadzenColumn would not be rendered correctly.

RadzenColumns are positioned on and always snap to a 12-column based responsive grid.

RadzenColumn properties

Property	Type	Values	Description
Size	int	1 to 12	The number of grid columns (n out of 12) that this RadzenColumn occupies. If column Size is not specified, the column width is automatically calculated with respect to the remaining free space available. 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.
Offset	int	0 to 12	Moves the column to the right following the grid column layout. E.g. Offset=”3” offsets 3 columns to the right.
Order	string	0 to 12, first, last	Reorder columns visually without reordering the DOM. Most popular use case is reordering columns on different screen sizes.

See all congifuration options in the RadzenColumn component demo and RadzenColumn API reference.

RadzenColumn breakpoints

You can arbitrary resize, offset and reorder columns on different screen sizes.

To adjust a column for a specific screen size, expand the property and set a specific value to the respective breakpoint.

Important

• Breakpoint without a value inherits the value of a smaller beakpoint or the default one.
• If a default value is not set, the column resizes automatically until it matches a breakpoint with a value.

Read more about breakpoints in the Responsive Breakpoints demo

Create a responsive layout

Let’s create a basic 3-column layout that arranges the columns vertically one below the other on smaller screens.

1. Open an existing page or create a new one.
2. In the Toolbox find the RadzenRow component.
3. Drag and drop the RadzenRow component on your page. The component is stretched to 100% of the page content width.
4. Drag and drop RadzenColumn in RadzenRow
5. Set RadzenColumn Size for different breakpoints. In our case we want 3 columns one below the other for screen-widths up to 768px and 3 columns next to each other above 768px:
   1. Set 12 to Size
   2. Set 4 to SM
6. Duplicate the RadzenColumn until there are 3 columns in the row.
7. Preview the page in different screen sizes to make sure the layout works as expected.

Create a center-aligned layout

The centered layout is aligned to the center of the browser window and occupies 100% of the page until it reaches a predefined maximum width.

1. Open an existing page or create a new one.
2. In the Toolbox find the RadzenStack component.
3. Drag and drop the RadzenStack component on your page. The component is stretched to 100% of the page content width.
4. In RadzenStack Styles set the desired maximum width of the layout. Set Max W to e.g. 1200px.
5. Set RadzenStack Left and Right Margins to auto.
6. Drag and drop RadzenRow in RadzenStack. Add as many RadzenRows as needed.
7. Drag and drop RadzenColumn in RadzenRow. Add as many RadzenColumns as needed.