How to Use Columns and Rows – Layouts in Gutenberg

Gutenberg is more than just blocks. It lets you layout a page using columns, thus providing greater flexibility with the look of your page. You can create columns and rows with a variety of different content in both.

As can be expected with such a new release there are some limitations, but it still represents a great step forward. If you find you need more layout options after reading this guide, check out the Advanced Gutenberg plugin.

In this tutorial, you will look at using columns in the WordPress core Gutenberg editor.

---

Video on Gutenberg columns

This video, normally available only to OSTraining members, show how to use layout and column options in Gutenberg:

---

Getting started with Gutenberg columns

When you open the new WordPress editing screen, click the + icon to add a new block. Open up the “Layout Elements” area and look for the three-column icon.

After clicking the three-column icon, you will get empty columns with some placeholder text in the center column.

Visually, I did find this initial layout a little confusion. There was no immediate indication as to many columns are in this “Columns” block. After some clicking around, I was able to highlight this whole area and see that it was using 2 columns.

---

How to add blocks inside Gutenberg columns

Gutenberg asks you to place blocks in these columns. So, because columns are blocks, you are essentially adding blocks inside blocks.

Click inside the columns are and you’ll see that there are multiple + icons floating around:

When you’re mousing over the column areas, a blue border will appears around each column. You will see a + icon which allows you to add new block into that column.

But if you click on this + icon at the top of the row you can create a new row.

This is how the new row will appear, over the top of the three columns below:

Moving Gutenberg rows and columns

To move rows and columns, you can use the controls on the left-hand side of the screen. These controls only appears when mousing over them. These controls consist of an up arrow, a down arrow, and an icon with dots.

The arrows will move the row up and down. You can use this icon with six dots to drag-and-drop your columns to a different part of the screen.

The blue line will help with finding a new location for the column. Here you can see that the image has been moved to a row above its original position.

To resize the content, you can select “wide width” or “full width”.

According to the documentation, you should be able to resize the columns by adjusting the grey borders between them, but my tests on Firefox and Chrome failed.

The right-hand sidebar provides some useful options. Here you can change the number of columns by either entering a number or adjusting the slider.

If you click on the Advanced tab on this sidebar you will also be able to add a CSS class. By creating a class you can control the width of the columns.

In the example below, you can see the difference between “wide width” and “full width”.

It’s worth noting that you can also use the size of images to control the width of columns. By making the image smaller the text block has more space to fill the row, while a larger image will force a text block to take up less space.

Are Gutenberg columns responsive?

Yes, Gutenberg columns will automatically stack on smaller screens. If you use the CSS feature mentioned above you will have to ensure that your styling is responsive. However, if you use the the standard layout with extra CSS classes, your columns will stack very neatly.

My thought on Gutenberg’s column features

The column functionality in Gutenberg shows that it is not a fully fledged page builder. And, it’s worth noting that ome of the controls are a little difficult to use. However, Gutemberg has some interesting features and offers much greater flexibility than the previous editor.

More Gutenberg Reading

• Gutenberg is the Biggest Ever Open Source Software Launch
• How to Use the New Gutenberg Editor in WordPress
• How to Reuse Blocks in WordPress Gutenberg Editor

{snippet gutenbergvideo}