Grid

Description

A shortcut block for creating CSS Grid Layouts. By default it consists of 1 parent and 2 child Container Blocks. More blocks can be added to the grid and the layout modified using the block settings and Styles.

Container Block variant

The Grid Block is a variant of the Container Block.
Container Blocks with a Layout > Display property value of Grid will auto transform to a Grid Block.

Toolbar

The Grid block has the following toolbar options.

Add to Container

Add the selected blocks inside a new Container Block

Block Settings

Layout

This shortcut action allows you to quickly set up a CSS Grid layout. It will set both the number of grid items and the number of columns in the grid with a single click.

Changing a Layout may add more Items to the grid, as well as change the layout. Lets take a closer look at how that works.

• the default Grid Block started with 2 grid items in a 2 column layout.
• choosing a larger layout eg. 4 columns will generate two additional grid item Container Blocks and set the layout to 4 columns
• the additional blocks a layout will insert are duplicates of the last child grid item.
• subsequently choosing a smaller layout eg. 3 columns will simply set the layout to 3 columns. It will not remove any existing blocks.

Shapes

More information on Shapes can be found on the Shape Block article.

Shapes can be added to a Container Block or any variant of them. You can choose from a list of predefined Shapes or add SVG HTML for custom shapes.

List View

Each shape is added as its own block within the Container. A Container can have multiple Shape blocks inside.

• Container
• Shape
• Shape

Shapes Pro

With GenerateBlocks Pro you can create your own custom shape and icon libraries using the Asset Library feature.

Asset Library

Inline Background Image

This option adds a inline image to the blocks background. You can choose to either:

1. Browse for a static image in the media library
2. Insert a dynamic tag to display a dynamic image e.g Featured Image

When you add a Inline Background Image, GenerateBlocks automatically:

1. Adds the Image URL to a CSS variable named --inline-bg-image
2. Inserts the variable into the Blocks HTML style attribute
3. Builds the block Styles > Background properties to display the background image

Here is an example of the HTML of a Container Block with a Inline Background image.

<div class="gb-element-22394958" style="--inline-bg-image: url(https://learn.generatepress.com/wp-content/uploads/2024/11/headline-block-settings-o.png)"></div>

Adjusting the Background Image Styles

With a inline background image set, go to the blocks Styles > Backgrounds panel.

There you can edit the Background layer and set any of the available background style properties including its Position and Size. There you can also set additional background layers for more creative designs, including color and gradient overlays.