After reading this article, you’ll know:
Container component’s major options and use
The Container’s limitations that differ it from other layout components
What is the Container component?
Container is a layout component that is used to group and organize other components within a layout. Although you’d expect the Container to be able to hold other components, it works only partially, as, for example, the Column component can’t be placed within the Container. That means that you can’t create a proper responsive layout structure using Containers as parent components.
The Container is an unconventional element in the layout building, especially with the advancement of other page components such as the Box and Columns. Its role has become more limited compared to these other components.
Options
Container has rather typical options for layout components. You can:
Set its max width, with six options available - from XS to XL.
Disable gutters - spaces between columns that help separate content. Gutter widths are fixed values to better adapt to a given screen size
Select a background color for this component. Colors are pre-selected via the Theme Builder
Regulate the height of the Container
Using the Container component
Despite its limitations, the Container component still has its uses within our platform. It can serve as a standalone element for styling purposes or act as a placeholder for future functionalities.
The Container is particularly useful for simple pages where you only need to display a single media file, such as an image. Normally, you cannot place the Media component directly on a blank page without a parent component. By placing the Media component within a Container, it will automatically stretch to fit the size of the image and adjust for different screen sizes.
While you can explore creative solutions to overcome the constraints of the Container by utilizing other layout components in conjunction with it, we highly recommend using Columns and Boxes for constructing a responsive and adjustable page layout.