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:

  1. drag the Grid control onto your page
  2. 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: