Grid
The Grid control is one of Stadium's Layout controls that allows you to organise all your controls on a grid of rows and columns. It allows you to specify the number of grid columns and grid rows by adding your required controls to the Grid.
Grid renders as a standard CSS Grid, which means that you can style your Grid as you would a standard CSS Grid.
How to lay out your Grid
To lay out a page section with a Grid:
- drag the Grid control onto your page
- drag a control onto the Grid - a Grid column is automatically created with your control inside the column
You can only have one control per column, unless you have a layout control as the first control in a column, like a Container, Flexbox, Table, or another Grid, and then add one or more controls to that layout control.
When adding a control to create a new Grid row, you can only add it below a cell that contains a control of its own. From there it is possible to move your control to a different cell in the Grid row.
Each grid column will be of equal width. The width of each column is determined by:
- the width of the container that the Grid is added to (e.g. Page, Table, Panel, or Container control)
- the width of the overall Grid, which you can set in Styles (CSS)
- the number of columns you create in your Grid
Example
A Grid with 2 columns, one column with a Container and two Label controls inside it:
