Gutenberg Advanced Layout

Columns

This block can be used to create flexible column systems:

• Easily adjust the size of your columns.
• Choose different dimensions for different screen sizes.
• Align content vertically and horizontally.
• Choose the spacing between columns (vertically and horizontally).

This block is a sub-block of the Layout block.

Column

The “Column” block is the only possible child of the “Columns” block. It can contain all defined blocks.

For each column, you can:

• Show column or not (useful if you want to use columns to replace margins)
• Column width, different units available (depending on your theme)
• Order, to reverse the order of two columns

Grid

The “Grid” block lets you arrange elements in the form of a grid.

This block can contain the “cell” block.

In the settings, you can define the number of columns (maximum 12) and rows (maximum 12) in the grid (depending on screen size, if required).

In the “Dimensions” section, you can change the gap between child blocks.

This block is a sub-block of the Layout block.

Cell

The “Cell” block is the only possible child of the “Grid” block. It can contain all defined blocks.

For each cell, you can choose:

• The starting column
• Cell width
• The starting line
• Cell height
• Order of superposition (z-index)
• Minimum height

Personalization

By default, three screen sizes are available:

You can change screen sizes to manage responsive.

The changes will apply to all blocks on the site.

The “lg” size defined with “Gutenberg Advanced Layout” is reserved; you can only modify its label.

The “sm” (mobile) size is set to “autoStack” to force default stacking of columns and cells.

To add a new screen size, copy the following code into your child theme’s functions.php file:

To delete a screen size:

To change screen size:

To force stacking on a specific screen size: