Working with container

Container blocks are used to group other blocks, such as text, images. Besides, it helps to organize the layout by using different display modes (fluid, block, grid flex).

Note that there are many styles applied to a container, will be passed down to its children. For example, font, text color, text style, etc.

In this document, you'll learn how to

1. Add a container block
2. Style a container block
3. Pay attention to Display

1. Add a container block

You can insert a container block similar to other blocks.

1. From the Add Component panel, select a container block
2. Drag them to your page and into the page, and drop them wherever you want.
3. Your text block is now inserted

2. Styling a container block

You can style a text block through Toolbar, or Styles panel. Those options allow you to update font, style, colors, padding margin and more.

Pay attention to Display

When styling a container, pay attention to Display options, which define how its children are organized. Those options include:

• Fluid: Children can be placed freely, anywhere.
• Flex: Align content either horizontally, or vertically. Element inserted before, will be displayed first.
• Grid: Align content into rows and columns similar to a table.

Below is another example, compare between Flex vs Grid display

Now, you know the basic of using a container.