| WordPress

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. In this tutorial, you will look at using columns in the WordPress 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


The video introduction to Gutenberg

WordPress 5 is here with a brand new editor called Gutenberg that changes the way posts and pages are created and edited. This video is your complete guide to Gutenberg! Thanks to our friends at Glowhost for making this video possible: Save 60% on your first invoice when you host your WordPress site with GlowHost. Click here and use the coupon "WPGUTENBURG".


About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.