> For the complete documentation index, see [llms.txt](https://docs.fortifiedid.se/forms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fortifiedid.se/forms/the-service/key-components/step/layout.md).

# Layout

All steps and summary pages use a *layout grid* with a base column width of 12. \
All controls, or children, can be specified to have different sizes and multiple breakpoints for different screen sizes.

All controls (or children of the grid) have a base width of 12, meaning that they fill the entire width of the grid. A child with the width of 6 will occupies half of the grid, a child with the width of 8 will occupy 2/3s of the grid.

<figure><img src="/files/xb8Da8FNsN0I1L2oQ4tM" alt=""><figcaption></figcaption></figure>

The grid will fill its columns from left to right and fit up to 12 columns in each "row".

Sizes for the controls can be set in the ui \[SKRIV HÄR, måste kanske ändra en grej i hur man konfar kommer jag på nu.]

All controls will be rendered into the layout according to the order that they are defined.

Each breakpoint (a key) matches with a *fixed* screen width (a value):

* **xs,** extra-small: 0px
* **sm,** small: 600px
* **md,** medium: 900px
* **lg,** large: 1200px
* **xl,** extra-large: 1536px

### Advanced layouts

For more advanced layout options you can also configure a `"ui:grid"` property on the ui for the step.&#x20;

Using the `"ui:grid"` all other rendering will be bypassed, and only items found in the `"ui:grid"` will be rendered.

With `"ui:grid"` it is also possible to nest grids.

```json
    "ui": {
      "ui:grid": {
        "spacing": 3,
        "items": [
          {
            "size": 12,
            "spacing": 2,
            "items": [
              {
                "size": { "xs": 12, "sm": 6 },
                "spacing": 3,
                "items": [{ "item": "firstName" }, { "item": "lastName" }]
              },
              {
                "size": { "xs": 12, "sm": 6 },
                "items": [{ "item": "helpText" }]
              }
            ]
          },
          {
            "items": [
              { "size": 8, "item": "address" },
              { "size": 4, "item": "postalCode" }
            ]
          }
        ]
      }
    }

```