How to Use Columns and Rows – Layouts in Gutenberg

WordPress Gutenberg - Using Columns

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.

gutenberg columns

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

3 columns

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.

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:

3 column buttons

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.

Add a new block for Gutenberg columns

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

Add a new row for Gutenberg columns

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

New row for for Gutenberg columns block

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.

Move up and down for Gutenberg columns

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.

Drag-and-drop for Gutenberg columns

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.

Moving options for Gutenberg columns

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

width options for Gutenberg columns

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.

Number of colimns for Gutenberg columns

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.

Advanced options for Gutenberg columns

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

Different widths for Gutenberg columns

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

{snippet gutenbergvideo}


0 0 votes
Article Rating
Notify of

Newest Most Voted
Inline Feedbacks
View all comments
Rich Tabor
Rich Tabor
5 years ago

Hey Libby, I found your post about Gutenberg columns and thought you might find the new [url=]rows/columns implementation[/url] that I’ve been working on at [url=]CoBlocks[/url] interesting. I’d love to know your thoughts on it!

5 years ago

I may be an idiot here, but I can’t get the columns to work. I clicked columns, created the blocks, but then when I publish to my site the columns aren’t side by side. Instead the second column is beneath the first and off set to the right as though it had been indented.

This is beginning to frustrate me.

5 years ago
Reply to  Jared

Yes, I agree, Jared. The columns were marked as “Beta” for a long time and they still feel that way.

Elvis Popović
Elvis Popović
5 years ago

Is it possible to link columns (like QuarkXPress for example) to make text flow from one to another? If not, will this feature be available in future releases?

4 years ago

How does one fine tune the max-width, padding, margin between two buttons that are inline, or two columns, which may have a single button in each? Do I have to add a custom class to each layout block that I need to fine-tune?

4 years ago

You should checkout You can add container, rows and columns and even specify custom ID’s nd classes to it. 

David Abramson
David Abramson
4 years ago

Came here to figure out if I could manually create my own breakpoints with columns. Guess not. Bummer!

Amit KG
Amit KG
3 years ago

Can you add images to each column? Or can you add action buttons to each column?

3 years ago
Reply to  Amit KG

Amit, the answer is YES to both questions.

Lynne Connolly
Lynne Connolly
3 years ago

But it makes a complete mess of the image and text block on tablet-sized screens. You get a tiny image, and a long column of text. I’ve let my site load on the left while I look for a solution. No, a wider central column doesn’t work, you still get the awful rendition on tablet screens. I tried it with several themes, and the results were the same. And I really don’t like coding. 
I recently switched from using a page builder (Elementor) to using Gutenberg because Elementor was slowing down my site a lot, and I couldn’t get any tech help from them. I’m finding the little tweaks needed to make a website great really hard to implement, and since I’m a poverty-stricken drag-and-drop user who only knows a tiny bit of code, I’m finding it hard going. 

Would love your thoughts, please comment.x