# 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. You can add controls to Grid cells, one control per cell. By adding controls to your Grid, you determine the number of grid columns and grid rows.

Grid renders as a [standard CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout), 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](/features/styles.md) (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:

![](/files/Ml9qVZuReMG2dHB4Eq6l)

***

### CSS Help

Go [here](/controls/css-for-flexbox.md) for CSS code snippets that you can use in styling your Grid and the controls inside your Grid.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stadium.software/controls/grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.