In a single row, you can have multiple layers of parent columns, child columns, and modules. A column within another column is considered a child column. We'll define a module layer. as a module that exists by itself in a layer. Depending on how you create a module layer, it can be inside its own child column or be part of the parent column.
Here's a layout example.
In this diagram, there are three main columns, taking up two layers within the same row. All of the columns contain multiple layers, but only Columns 1 and 2 contain child columns in their second layer. In Column 2, the left child layer contains two module layers.
Here's an example of a web page that matches the example in the diagram.
Properties and limitations of column layouts
Column Settings are accessed via modules, except when blank
You can insert a new blank column from Add Content > Row Layouts. Before you add a content module to a column, you can access Column Settings by hovering over the blank column and clicking the tool in the middle of the row.
After you add a module, you access Column Settings from the toolbar when you hover over any of the modules in the column. See the screenshots in the following sections.
You can have more than one module in a single column
This is true for both parent and child columns. In the example above, the left child in the second layer in Column 2 has two modules. if you move that column, both module layers within that child column will move.
Putting modules into the same column keeps them together as a group as the screen grows smaller. It also affects horizontal alignment with other columns in the layer.
You can have multiple layers within a row or column
You can set up multiple layers of modules or columns within a row, and multiple layers of child columns within a column. Whether you have layers of columns within a row or break the columns into separate rows depends on whether you want to treat those columns as a group, such as having the same row background or saving the entire row for reuse elsewhere.
A single layer can have both main columns and child columns
Sometimes it can be hard to figure out how columns in a single layer are grouped.
For example, in the following screenshot, there are six modules.
On the other hand, the first column's settings have no option to move a parent, so you know it's a main column in the row.
You can have up to 12 main columns and four child columns in a layer
For example, in the following schematic, the row has two layers of columns, in which the first seven columns are in the first column layer and Columns 8 and 9 are in the second column layer. The bottom layer in Column 8 has four child columns, the maximum number. Column 1 could have 5 more columns to reach the limit of 12.
Columns cannot be nested recursively
In other words, you cannot put any columns within child columns.
You can move columns
You can move both columns and child columns and preserve the column's style settings.
If a module layer is in its own child column, you can style and move its column independently from the main column.
You cannot duplicate columns
This means that you can't duplicate column settings. Instead, duplicate the module, move it into a new column, and adjust the column settings manually.
Columns stack from left to right, top to bottom
Stacking occurs left to right, top to bottom first within each column then across columns. Let's go back to our original diagram and show the order in which columns, child columns, and modules are stacked on small screens.
Stacking within each column completes before moving to the next column in the same layer, Modules in a single column or child column are stacked before moving to the next location.
You can add or subtract columns in any row
To add a column:
- Open the Edit column icon and click Insert column before or Insert column after.
To subtract a column:
- Open the Edit column icon and click Delete column.
Warning: When you delete a column, any modules within it are also deleted.
A column can contain one or more modules
Modules are always laid out vertically within a column, as shown in the upper layer Column 2 of this screenshot.
As the screen width is reduced, columns stack vertically
In the example in the screenshot above, as screen width is reduced, columns are vertically stacked in the following order:
- Column 1 Module 1
- Column 2 Module 1
- Column 2 Module 2
- Layer 2 Column 1 Module 1
- Layer 2 Column 2 Module 1
- Layer 2 Column 3 Module 1
You can have more than one layer of columns within the same row
In the screenshot above, a row layout with 3 columns was dragged to the same row containing the two-column layout.
You cannot subdivide columns
For example, you cannot nest two modules under Module 1 in any of the columns in the screenshot.
It's not a good idea to try to simulate nesting by adding layers of columns and adjusting column widths, because when the screen width is reduced on smaller devices, the columns in each layer will be vertically stacked, and you will lose the visual grouping. While other workarounds are proposed and may work, they are not supported. When the markup gets complicated with nesting, you run the risk of various browsers and devices not rendering it correctly.
Use workarounds at your own risk.
When you change one column width in Column Settings, the others automatically re-adjust
For example, if you have three columns, by default the width of each is 33.33%. If you change one column width to 10%, the others adjust to 45% each. This can make it tricky to adjust column widths numerically in the Column settings editing screen.
Tip: Adjust column widths by using the column drag handles to change each column to the desired width. The drag handles are shown in this screenshot: 
To remove custom column widths across the row, mouse over the Edit column icon and click Reset column widths.
You cannot move or duplicate columns
If you move a module to a different column, any column-specific settings for the column you moved it from will be lost. If you want the same column settings, you'll have to open Column Settings in the new location and add the settings manually.
If you delete a column, the modules inside it are also deleted
To delete a column:
- Click Remove in any empty column, or open the Edit column icon and click Delete column.