Container layout types

Choose how a container and its contents are displayed on a page, such as in horizontal rows or as columns.

You can add the following types of container layout to a page:

• Row

• Column

• Inline

• Tab

Row

On all screen sizes, items within the container are laid out in separate stacked horizontal rows.

Column

On larger screens, items are displayed within the container in columns; on smaller mobile and tablet screens, these columns and any nested columns will stack.

Column width is responsive, based on a 12 column grid. Child items in this container are divided into the 12 column grid equally, for example, if the container has 3 child items inside, each item will occupy 4 columns.

Inline

Items in an inline container are laid out horizontally side by side, with each item wrapping to the left if there isn't enough horizontal space available for all the items to be laid out next to each other; this depends on the width of each container (defined by the container content or a CSS width attribute for example) and the screen size. The larger the screen, the more items are displayed in a row; on smaller mobile and tablet screens, more wrapping will occur.

Tab

A container that displays child containers as a set of tabs; selecting a tab displays the content within the child container.

The label of each tab is defined in the Label field of the child container. For example, if a Tab container contains a child container with a label of "Tab 1" then a single tab is displayed with a label of "Tab 1".