BB – Column layouts overview

BB – Column layouts overview

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. See the Related Article on tips for using columns.

Here’s a layout example.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

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.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

In Column 3, the medium gray shading is the column background color, whereas the dark gray shading in the lower module layer is the Call to Action module background color.

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.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

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, as shown here:

AstroHub - Column layouts overview
AstroHub – Column layouts overview

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.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

Are the modules in six columns in the row or are some of those modules child columns within a parent column? In this particular example, the modules are in four main columns, and Column 4 has two child columns, as shown in the following screenshot.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

How can you tell? One way is to open Edit Column for each module. If you see the option to move the parent column, then you know the module is in a child column. For example, if you click Edit column on the bomb icon, you can see the Move parentoption near the bottom of the list.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

If you click and hold down your mouse on Move parent, the blue background shading expands to show you the parent column, as shown in the next screenshot. It’s a bit hidden, but the shaded box is encompassing the last two icons in the row.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

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.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

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.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

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. See the Related Articles for information about how to move columns.

If a module layer is in its own child column, you can style and move its column independently from the main column. See the tips for working with columns in the Related Articles for more information about how to put module layers into their own child 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.

AstroHub - Column layouts overview
AstroHub – Column layouts overview

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.