Customizing the layout with columns is not always simple. Layouts are an essential part of the user’s experience on your site and will help retain visitors by making the experience better.
The Layout Grid Block plugin allows for creating column-based layouts within the block editor. Creating an appealing design for your content can be done with one block, and customizing is simple. Everything can be done with a few quick clicks, from adding columns to customizing how different devices view the page.
Want to learn more about the block editor? Check out Getting Started with Gutenberg (Block Editor) in WordPress
Getting Started
To get started, download and install Layout Grid Block.
Begin by navigating to Plugins on the dashboard and click Add New. From here, there are two options for installation.
Option 1: Search for Layout Grid Block. Click Install Now and Activate.
Option 2: Go to the plugin page, download the zip file, and upload into the designated section under Upload Plugin.
**Check if the plugin was successfully installed and activated under Installed Plugins.
Add Block to Editor
There are two ways to add the block into any post.
Option 1: Click onto the post and begin typing “/layout grid”. To add it, click on the block result or press Enter when finished typing.
Option 2: Click on the + to the right, search for Layout Grid, and click to add it to the post.
Once added, it will prompt the selection of a layout (between 1 and 4 columns).
Change Columns
Once a layout is chosen, it can always be modified on the right-hand side through more block settings. Under the Block settings, find the Layout section to change the number of columns.
Note: There will be data loss if choosing a layout with fewer columns. The data is not temporarily saved to each column, so be sure to save this data somewhere else before changing to a smaller layout.
Adjusting Width
To adjust the width of each column, click into the block. There is a small section around the block that will allow you to click into immediately.
Another way to select the grid is to click the List View Icon at the top left.
Then click on Layout Grid which will select the whole block.
A third option to select the block is to click into and select the column first, then select the layout grid.
Once the block is selected, there will be blue markers for each column. Click and drag this marker to the desired width.
Gutters
The gutter controls the spacing between the columns within the grid. To change the gutter size, navigate to the Gutter section of Block settings and select the desired size.
Additional spacing to the left and right of the grid can be added by toggling on “Add end gutters”.
Text Alignment
Select the column and then click Change Vertical Alignment to change the vertical text alignment. Data alignment corresponds to the selected alignment – align top will align text from top to bottom.
Responsive Breakpoint
An additional feature for the plugin is to see how the layout responds with Desktop, Tablet, and Mobile. The offsets for each column automatically adjust to reflect the selected breakpoints.
To preview your post with different breakpoints or to change the offset and span of each column, navigate to the Responsive Breakpoints section.
The offsets and spans of each column can be specifically set for each breakpoint (Desktop, Tablet, and Mobile).
Summary
The Layout Grid plugin allows for creating column-based layout with easy customizations for columns, widths, gutters, text alignment, and breakpoints. Customizing how the content looks on the page and on different devices is easy with a few clicks.
