Containers, rows and columns

Usage

The layout system uses containers, rows, and columns to layout and align content, and is built with Flexbox and is fully responsive. We provide three different components to build complex views:

• Container - Containers are the most basic layout element and are used to contain or group different components within a section
• Row - Rows must be placed within a container for proper alignment and padding. Use rows to create horizontal groups of columns
• Column - Use Column to divide the view horizontally, with a maximum of 20 columns per row

JSON structure example

"viewDefinition": {
    "children": {
        "container": {
            "type": "container",
            "id": "someId",
            "fluid": true,
            "children": {
                "row1": {
                    "type": "row",
                    "children: {
                        "col1": {
                            "type": "col"
                        },
                        "col2": {
                            "type": "col"
                        }
                    }
                },
                "row2": {
                    "type": row",
                    "children: {
                        "col3": {
                            "type": "col"
                        },
                        "col4": {
                            "type": "col"
                        }
                    }
                }
            }
        }
    }
}

• type (String) - the type attribute for a container, row and col
• id (String) - an id for the component
• fluid (Boolean) - Only for container. Set to true for a full width container, spanning the entire width of the viewport
  • Default: false

Do's and Don'ts

For more details, refer to Grid Usage and Visual styleguides in our Storybook