Over the years we have added tools to make it possible to subdivide the areas with custom layouts and grid layouts. These tools solve the problem by taking larger areas and turning them into two or smaller ones that's pretty much all they do. Like you can divide them into columns and so on.
- There is no option to add multiple sections within these layouts.
- There is no way to add different rows on top of row's
- Layouts are limited to a single row, with some different areas in some different columns
Additionally, layouts aren't really solving the problems of the modern web. These days, you really want to give developers and site editors the ability to craft sections of content that can easily be repurposed across different pages. In Concrete you can easily do this with block types, but then you end up with thousands different bespoke block types on your site, all with slightly different purposes each of which has to be documented and each of which specifically be locked just to the functionality you build into that block type.
Containers help with this problem because they basically let you add custom sections of HTML, PHP and editable Concrete areas as though they were their own block types. You can even nest containers inside another container.
Let’s understand it with an example.
Below is the example of the page section which is divided into two parts.
Let's say you want to build a section like this then you can do it in several ways:
- You can build a custom block which has static defined HTML in its view where you can define two areas for adding text on right and Image on left. This Approach is limited as you won’t be able to use any other existing Concrete block in it.
- You can build an area in the page template itself and then you can use the existing Concrete5 blocks inside these areas but these sections will exist there in the page template even if you don’t add any content in it.
- You can define a custom grid layout and then turn that into two columns but with that you have to work with a custom CSS class on that layout.
All of the above approaches will be solved in a more flexible manner with Containers. With the help of Containers, you can define reusable containers just like blocks and can add them in any page section/areas as required.
In the next section, you will learn How to create and use containers.