---
description: Forms comes with ha default layout. It places controls from left to right.
---

# 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="https://content.gitbook.com/content/oCQgA1yDTcQKZtg0KE8x/blobs/dz4QovvUNceS4mEDJt0g/image.png" 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" }
            ]
          }
        ]
      }
    }

```

