Working with Gutenberg part 1: column width, flexible and single column

last updated: 7 July 2019

Working with Gutenberg | Column width within row | Column width single column |


Working with Gutenberg


This post has nothing to do with the Easy Town Book Series and everything with this website. By now, I have built and rebuilt a few websites with the Gutenberg Editor, and I like it. Yes, you need a steady hand, some ingenuity, patience to get the hang of things, and a few tricks. But once you’ve got all these, working with Gutenberg is faster, easier and more flexible than working with the classic editor. Besides, Gutenberg gets better with each update. Below you’ll find my bag of Gutenberg tips and tricks.

Working with Gutenberg | Column width within row | Column width single column |


Column width: different sized columns within a row


For columns with variable column widths, I either use CoBlocks or Atomic Blocks.

CoBlocks

CoBlocks comes with a whole collection of Gutenberg blocks. For columns choose rows. You can adjust the column width pretty freely by moving the blue dot or by inserting a percentage (sidebar). What’s also great is that you can adjust the gutter, margin and padding. Also, a nice The big catch with CoBlocks are the breakpoints. From where I stand they break too late on tablets. Originally, I used CoBlocks for the three-column book introduction row on the front page. But, because of the breakpoints I switched back to the Gutenberg columns.

Example: three columns with individual width, using CoBlocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example: three columns with Gutenberg blocks. Watch the breakpoints by minimising the browser window gradually.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example: three columns with Atomic Blocks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Atomic Blocks

Recently, Atomic Blocks added the ‘AB Advanced Columns’ block to their collection. They are easy to use and come with a lot of settings. However, the column widths are pre-defined. Saying this, the pre-defined columns cover a lot of options, such as 1/3, 2/3, 1/3 or 1/2, 1/4, 1/4, 1/4. They also include rows for five and six columns.

Again, it’s the breakpoints I don’t like. So, while I love working with different column widths, I mostly opted to use the Gutenberg Columns because of their better breakpoints.

Saying this, Atomic Blocks offers something really nice: containers. And with those you can do all sorts of nice layouting. See next point.

Working with Gutenberg | Column width within row | Column width single column |


Column width: changing a single column width


The best block for this comes from Atomic Blocks: the container. However, let me start with a warning. You can fill your container with any number and kind of blocks, but once these blocks are in the container, you might not get them out. You can still copy or change the content of a block, but sometimes you can’t move them outside the container. So my advice is: always build what you want outside the container first, then copy and paste your creation into the container.

I am really like the Atomic Blocks container, since it comes with a whole range of useful settings: margins, paddings, background image, background colours.

The most important setting is: Inside Container Max Width (px). With this little beauty you determine the maximum width of your container. You’ll find ample examples of this on this website. Often I set the main headlines full width, and put the text into a container with a max width of 700px (sometimes more, e.g. when I use inline images in a text).

The minimum width for a AB Container is 500px, the maximum 1600px.

Some other things you can use the AB container for:

Background colour for headlines or lists: it’s a bit annoying that you can’t use background colours with the Gutenberg blocks: headline and list. However, you can add either to a container and change the background colour of the container. There is a catch, though. If you add background colour to a container the colour will be full width.

test heading inside container

  • test list inside container
  • another list item
  • just for the sake of it

A second container integrated into the first. Not very elegant but a possibility.

For rows you don’t want to display full width on big screens: say, you want to display a two-column row at a max width of 700px. If you are sure that you don’t want to change the two-columns into a three-column layout, then you can add the rows directly in the container. But, honestly, it is safer to build outside the container and only add your layouted elements to the container when you’re pretty sure, you don’t want to do any substantial layout changes anymore. If you used the container too early, the fastest way to make the changes you want is to rebuild the layout. If you feel like battling a little, try to catch the dialog for the rows — you’ll probably need a few attempts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Creating reusable blocks with multiple blocks and rows: Find more on that in the next section.

Getting out of containers: If you work with several containers, it can get fiddly. The best way to avoid that is to make sure you keep some empty and container free paragraphs between containers.

Moving content into an empty container: The best way is to add a paragraph with a few characters to the new container and copy and paste above this paragraph, or drag a block above the paragraph. This isn’t necessary, but usually works better.


Working with Gutenberg | Column width within row | Column width single column |


Questions, Tips, Comments


I look forward to questions, tips and comments. The email from this form will be sent directly to my lemon pix media account. If you’d like a look at my other web design and photography work, visit the lemon pix media website.

Questions Gutenberg / WordPress