The Container block in Gutenberg page builder is a robust and flexible block that allows you to combine different blocks in a single row. For ultimate flexibility, you can change the container layout and size to different configurations.

With the Container Block, you can:

• Easily create your own layouts
• Combine multiple blocks in a single section
• Manipulate container paddings and margins.

How to use the Container Block

Container block allows you to create your own column layout and control the margins and paddings of your columns. You can add other blocks inside the columns.

The responsive settings allow you to control how your columns collapse on desktop, mobile, and tablet screens.

Adjusting the Columns’ Widths

When you add the Container block, you can choose from a couple of layouts with pre-set column widths. Have a glance at the below-attached screenshot for reference.

Spectra Container Block Settings

Once you select the container block, it will display the settings for that block on the side of the screen. You can adjust the container’s styling by navigating to the General Tab.

Have a glance at the below-attached screenshot showing all settings of the General tab.

General Settings

Presets: You can select the Preset of your choice here.

Size:

• Set the Container Width to Full width or boxed. You can also set the Container Width of your choice by navigating to the custom tab.
• Set the content width to either Boxed or full width.
• Also, set the minimum height of the container block here.

Flex Properties

Use the Direction option to determine the direction in which the contained elements will appear.

Style

You can adjust the container’s styling by navigating to the Style tab.

Background:

You’ll have the option to choose a background. This could be an image, video, solid color, or gradient. There are a few items to keep in mind, depending on which option you choose:

• Solid Color: A solid color offers a simple way to make a bold statement. However, it’s important to keep color contrast ratios in mind, as they affect accessibility.
• Gradient: If you’d like to use a gradient background, you must first select a solid color. From there, click on your block and edit the color options on the right side of the editor screen.
• Image or Video: Size matters for images and videos. Ideally, the resolution of your Container block’s image or video background will match the maximum width and height of the block. If you’re using a full-width block alignment, it will automatically crop the background to look good at that size. Otherwise, the background may become Pixelated on larger screens. Also, the file size should be a concern. 

Color:

When you select a block that supports color settings, the panel will display in the settings sidebar as follows.

You can set the text and hyperlink text color from the color palette.

Border:

This section allows you to set the border around the element’s edge.

• Border Type: There are 8 types of borders you can choose from–Solid, Double, Dashed, Dotted, Inset, Outset, Ridge, and Groove. All the other border settings appear if you choose any of them.
• Border Radius: This option allows you to round the corners of the border to create a softer, curvy look. The bigger number you set here, the more rounded the whole element will be.

Shape Dividers:

Select the divider of choice and apply it to the top and bottom of the container block. Also, you can set the divider\’s color, width, and height. 

Spacing:

The controls to set margins and padding work the same. You can also set the row and column gap here.

Other Settings

Responsive Conditions:

You can set the page\’s visibility on Desktop, Tablet, and Mobile here. The above setting will only take effect once you are on the live page and not while you\’re editing.

How to work with Container blocks

Add a container block and then add other blocks inside it. These can be new, existing, or container blocks for nested styling. You can change different style settings for any Container block. 

Adding new blocks to a container

To add a new block inside an existing container block, click the + icon. 

Dragging existing blocks into a container

You can drag and drop any existing block into a container block. You can rearrange the order of blocks inside a container similarly. 

Reusing a Container block in multiple designs

WordPress allows you to reuse blocks on as many pages as needed. This allows you to avoid setting up the same blocks repeatedly. You can also make container blocks to be reusable. This can save you a lot of time because container blocks can feature several other blocks and specific styling.

To make a Container block reusable, select it, then click the three dots icon for more block options. In the dropdown that appears, click the Add to Reusable Blocks option and give a name to your reusable block.

You can now insert this reusable container block in any design you create. Click to insert a new block, and in the Reusable section, click the one you want to insert.