Skip to main content
Sign Up for Service Updates

Understanding columns and containers

This is a Left Navigation Page template. When in desktop layout, there are 3 columns for the left navigation, and 9 columns for the content area. In mobile layout, both the side navigation and content area occupy 12 columns each.

This text component exists in the 9 column area on desktop.

A container that has been set to occupy fewer columns than its parent will inherit, as its grid, the number of columns it has been set to cover.

A container that has NOT been set to occupy fewer columns than its parent will have 12 columns for its grid.

Let's see this in action below.

First, let's see the existing 9 column grid of this content area. Note: This is only applicable to desktop view.

Col
Col
Col
Col
Col
Col
Col
Col
Col

This container is inside of a 9 column container (the default 9 column content area). This container has been set to span 5 columns of the 9 column container.

Col
Col
Col
Col
Col

The reason that the container inherits the grid columns of its parent is so that its children can line up with anything laid out in the parent container. You can see the grid columns lining up between the green columns above and the blue columns to the left.

This container has been added to a 9 column container (the 9 column content area) but it has not been set to span less columns than its parent.

Therefore, this container will have 12 columns for its grid. You can see that demonstrated below. Again, this is only for the desktop view.

Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col

This container has been added to a 12 column container and spans 6 columns. The direct children of this container will have a 6 column grid for layout.

However, there is a way to have a 12 column grid here, if you want it.

Col
Col
Col
Col
Col
Col

This container has also been added to a 12 column container and spans 6 columns. The direct children of this container will have a 6 column grid for layout.

C
C
C
C
C
C

This container is inside the container above and has not been reduced in size, so it will not inherit the grid of its parent and instead use a 12 column grid. You can see that below.

This may seem confusing, but the purpose of the inheritance is to make it easier to line up your content when laying it out.

Hopefully, by seeing these examples, you will be able to better understand how containers and their layout grids work.

Footer

Popular Training Links

Getting Help

We have a variety of resources to assist you with using AEM to build your website.

Check out our video tutorials to see AEM authoring in action. 

Internal Resources

External Resources

Popular Browser Plugins