Layout

Steps and summary pages use a responsive layout grid. The default grid has 12 columns, and Controls are rendered from left to right in the order they are defined.

Default grid

Each Control has a default width of 12 columns, which means it fills the full row. A Control with width 6 fills half of the row, and a Control with width 4 fills one third of the row.

Set the size of a Control with ui.ui:size.

{
  "id": "mail",
  "type": "Input",
  "ui": {
    "ui:size": {
      "xs": 12,
      "md": 6
    }
  },
  "config": {
    "required": true,
    "format": "email"
  }
}

Breakpoints

Responsive sizes can be defined for different screen widths.

Key	Name	Width
xs	Extra small	0px and up
sm	Small	600px and up
md	Medium	900px and up
lg	Large	1200px and up
xl	Extra large	1536px and up

If only one size is configured, that size is used from that breakpoint and up. A common pattern is to use full width on small screens and half width on medium screens and larger.

Advanced layouts

For more advanced layouts, configure ui.ui:grid on the Step. When ui:grid is used, only the items included in the grid are rendered.

This makes it possible to create nested grids or group Controls into sections.

{
  "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"
            }
          ]
        }
      ]
    }
  }
}