The container element is a layout element that can contain other elements. Containers are a fundamental organizing element of web pages, allowing you to build page layouts by grouping other elements within them, or to control the behavior of multiple elements at once.

For example, if you have a group of images and text that are part of a unit (such as a preview of an article), you can place all these elements within a single container so that they are grouped and will remain together when the screen size is changed.

Nesting elements within containers, and containers within other containers, is also essential to creating certain types of layering effects.

Click and drag the container element icon from your left toolbar onto the stage:

The container can be placed directly on the page, or may be placed within another grid or container element.

When a container element is dropped on a page, it will appear as an empty box that spans 100% of the max-width of the page (or its parent grid or container.)

A container itself is just an empty element. Once placed on the stage, other elements such as text and videos can be placed inside the container by dragging and dropping. You can also add an image to a container to have a background image for the section of content.

The container itself can be styled using the right toolbar control panels. You can use these panels to set a container's colors, stroke, dimensions, and so on.

To align multiple containers next to each other within a single column or component, make the sum width of all elements equal to or less than 100% to float them side-by-side when aligned left or right. Read more here.
​

You can used the dimensions panel or the handles on your focus frame to add space inside and outside your container. In the image below, top margin (green) was added to push the container down and add more white space, while top padding (blue) was added to increase the amount of grey space inside the container.

Pro tip: When adding a top-level parent container that will be holding multiple elements, give it a responsive width of 90% (or any number that you like). This makes it so that once your page is narrower than the max-width set for your site, the container will always have 5% margin on either side.

To Delete a Container Element, select any container that has been placed on the page by selecting it, then pressing the <delete> key on your keyboard, or choosing "Delete" from the "Edit" menu, or by clicking into the green gear icon that appears in the upper right corner of the container and select "Delete".