Working with Containers

The Container is the primary layout element in Creative Elements. It provides a flexible way to organize Widgets and other Containers, making it possible to build anything from simple content blocks to complex responsive page layouts.

Containers use modern CSS layout systems to control how their inner elements are arranged. You can use Flexbox to place elements in rows or columns and control their alignment, spacing, and wrapping. If the Grid Container feature is enabled, you can also use Grid to create layouts based on rows and columns.

Container in the Live Editor

Understanding Containers

A Container can hold Widgets, other Containers, or a combination of both. This allows you to create nested layouts without the fixed Section → Column → Widget hierarchy used by the traditional layout system.

For example, you can create a parent Container with two child Containers: one for your content and another for an image. The parent Container controls how the two child Containers are arranged, while each child Container can have its own layout settings to organize the elements placed inside it.

This parent-child structure makes it possible to create complex layouts while keeping related elements grouped together and independently configurable.

Flexbox Basics

When Container Layout is set to Flexbox, the layout is based on two axes: the main axis and the cross axis.

The Direction setting determines the main axis. Justify Content controls how elements are distributed along the main axis, while Align Items controls their position along the cross axis.

Because the main and cross axes depend on Direction, changing from Row to Column also changes the axis on which Justify Content and Align Items operate.

Direction

The Direction setting determines how elements are placed inside a Flexbox Container. Choose a horizontal or vertical direction, and optionally reverse the order of the elements.

The selected Direction also defines the main axis of the Container. Justify Content distributes elements along this axis, while Align Items controls their position along the cross axis.

Justify Content

Justify Content controls how elements are positioned and distributed along the Container's main axis. In the examples below, the Container uses Row direction, so the main axis is horizontal.

When the Container Direction is changed to Column, the main axis becomes vertical, so the same Justify Content options distribute the elements vertically instead.

Align Items

Align Items controls the position of elements along the Container's cross axis. In the examples below, the Container uses Row direction, so the cross axis is vertical.

When the Container Direction is Column, the cross axis becomes horizontal. In that case, Align Items controls the horizontal position or width of the elements.

Nested Containers

Containers can be nested inside other Containers. This is useful when a group of elements needs its own direction, alignment, spacing, or responsive behavior.

For example, you can use a parent Container with Row direction for a two-column hero layout. Inside the first child Container, you can use Column direction to stack a Heading, Text Editor, and Button vertically.

You do not need to create an additional Container around every Widget. Use nested Containers when you need to group elements together or control them as a separate layout.

Responsive Containers

Many Container settings can be adjusted independently for different responsive breakpoints.

This allows you to adapt the same Container structure instead of creating separate versions of the layout for different devices. For example, you can:

• Use Row direction on Desktop and Column on Mobile.
• Adjust Width and Min Height for different screen sizes.
• Reduce Gaps, Padding, and Margin on smaller screens.
• Change alignment or the visual order of elements at different breakpoints.

Container Settings

For a complete reference of the available Container controls, see the following articles:

• Container Layout Settings – Configure dimensions, layout, direction, alignment, gaps, wrapping, and other layout controls.
• Container Style & Advanced Settings – Customize backgrounds, borders, effects, spacing, positioning, responsive behavior, and other advanced properties.