The Grid Block is a robust WordPress Gutenberg Block editor layout tool that allows you to create a multi-column layout without coding. It lets you arrange your content in a structured grid of rows and columns instead of being limited to a single column of text or media.
Designing magazine-style pages, portfolios, galleries, or other sections where you want to add content side by side is easier using the WordPress Grid Block. Today, we will explore how to use the Grid Block in WordPress and give you an overview.
Create Beautiful Tables
With Block Editor
How to Use the Grid Block in WordPress?
Now, let’s walk through a step-by-step guide on adding a Grid Block. These steps will help beginners and intermediate users make the most of this block.
But before following the steps, you must go to your post and the pages where you want to use the block. After that, follow the steps below.
Insert the Grid Block
Click on the Add Block Icon (Plus Icon) (1), type “Grid” in the search box (2), and click on the block when it appears (3).
Insert Your Content
By Default, you will see that only two columns inserted for content. Insert your content by click on the + icon inside the block and then select your desired block.
Now insert other content or block by clicking at the bottom right side of the block.
You can insert any block you like. For my case, I’ve inserted the image block.
You can insert set the column space for your each block.
Block Customization
In the block customization, you get the options for the layout (1) and position (2).
In the Layout, you can choose the Grid Item Position. You can keep it in default or go with the manual.
The Auto option lets you adjust the Minimum Column Width.
The manual option lets you choose the columns for the block. You can easily adjust the number of columns within the block.
Next, you can choose whether to make your grid sticky or not. If you want to make it sticky, choose the sticky option.
There are also prebuilt styles for the block in the Styles Tab. You can select and see what it does. Here’s the preview below.
You can customize the text and background color using the Color option.
The Background image option lets you add an image for the block’s background.
To reset the image, click the three dots and select reset all.
In the typography, you can set the font, font size, appearance, line height, letter spacing, decoration, and letter case.
The dimensions let you customize the padding, margin, minimum height, and block spacing for the Grid block.
Let’s see the modification of the Block Spacing and Minimum Height below.
Lastly, the border & shadow option lets you adjust the border and border radius for the block.
Here is the final demo of what I’ve made using the block. It’s not the best, but it gives ideas of what this block can do.
Overview of the WordPress Grid Block
What is the Grid Block in WordPress?
The Grid Block is a container block that holds all other blocks in a grid layout. In other words, it’s a parent block in which you can place multiple child blocks (like paragraphs, images, buttons, etc.), and it will arrange them in a series of columns. It automatically creates new rows as needed.
What are the Key Features of the Grid Block?
The Grid Block has several useful features, making it a versatile tool for building layouts. Here are some of the key features:
-
Flexible Column Layouts: You can choose how many columns you want in your grid. The Grid Block lets you set a specific number of columns or let WordPress automatically determine the number of columns based on a minimum column width.