Layout

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

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.

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.

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.

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