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
Hey Libby, I found your post about Gutenberg columns and thought you might find the new [url=https://richtabor.com/coblocks-gutenberg-page-builder/]rows/columns implementation[/url] that I’ve been working on at [url=https://coblocks.com]CoBlocks[/url] interesting. I’d love to know your thoughts on it!
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.
Yes, I agree, Jared. The columns were marked as “Beta” for a long time and they still feel that way.
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?
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?
You should checkout https://wordpress.org/plugins/ultimate-bootstrap-blocks/ You can add container, rows and columns and even specify custom ID’s nd classes to it.
Came here to figure out if I could manually create my own breakpoints with columns. Guess not. Bummer!
Can you add images to each column? Or can you add action buttons to each column?
Amit, the answer is YES to both questions.
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.