Agencies
Services
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.
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.
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.
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.