Gutenberg Container Block Tutorial

One of the new and unique blocks that come with Premium Blocks for Gutenberg is Container Block. It comes with a big number of customization options to go beyond traditional sections. It will help you to create unique and eye-catching sections.

Check Gutenberg Container Block demo page from here.

Gutenberg Container Block
Gutenberg Container Block


Container Gutenberg Block Layout Settings

Customize Container general settings and flex properties options.

Gutenberg Container Block Layout Options
Gutenberg Container Block Layout Options

Gutenberg Container Block General Options

  1. Container Width: Select container block width full width or boxed.
  2. Content Width: Select content width to fill container width or to be boxed.
    1. Max Width: Set max width for boxed content.
  3. Min Height: Set minimum height for container block.
  4. Overflow: Set container block overflow default or hidden.
  5. HTML Tag: Select container HTML tag from dropdown.
    1. HTML <a> tag will help you to create clickable containers.

Gutenberg Container Block Flex Properties

  1. Direction: Select container block items direction: row, column, reversed row or reversed column.
  2. Align Items: Align container block items to start, center, end or stretch.
  3. Justify Items: Utilities for controlling how grid items are aligned along their inline axis.
  4. Wrap Items: Set items wrap to be in multiple lines or just one line.

Style Settings for Container Gutenberg Block

Here you can customize styling options like background, overlay, border and shape divider.

Gutenberg Container Block Style Options
Style Gutenberg Container Block

Related Docs: