How to easily style the WordPress columns block and make it responsive

When the Gutenberg editor came out as a plugin, the columns block was – and still is, at this moment (version 4.1) – in beta development. One of the consequences of this is – for now – that you have to style the block’s look and responsiveness yourself.

I installed the plugin on a couple of my own sites and on some new customer’s sites. I was convinced that, despite the backlash in the community, this new editor was here to stay. Why set up a site using the old – TinyMCE – editor when I had to haul over their sites a few months later to get them into the Gutenberg way of editing content (err… did I just talk myself out of a paycheck)?

One of the most requested features on a new website nowadays is a three-column section on the frontpage. Sometimes more, but three is the number of columns many business websites choose to display their main services in.

Since there is is a columns block, why not use it? So I did. And I quickly found out the columns a) touched each other (no spacing in between and b) were not responsive. Three columns next to each other on a phone screen is not user-friendly, so I needed to find a quick solution.

At this moment, the big 5.0 launch is due to come out soon, and themes are scrambling to become Gutenberg-friendly. Styling columns will mostly become part of the themes. But for now I use my home-grown bare-bones solution.

My bare-bones solution for styling the columns block

As you can see below, I have kept the styling to a minimum. So what am I doing here:

• First I am adding some whitespace below the overall block (wp-block-column) with a bottom margin. Without it, the column block is not stuck right on top of the next block.
• Next, I add a 2% left margin between the columns (wp-block-column) so these don’t touch each other.
• Since the previous rule added a 2% left margin to all columns, meaning the left column also had has a 2% left margin. That looks rather odd, so I bring back the left margin to 0 for the first column (the first child wp-block-column of wp-block-columns).

Those lines give the columns an overall styling. Nothing fancy, just adding some space so they look better. Now they need to look good on mobile devices too. Since having three columns with images and text makes the content unreadable on mobile, I want to make the columns screen-wide and place them below each other.

• I create @media query for screens with a maximum width of 768 pixels.
• The block itself is set to display with the default value, which is 100% width.
• The margin for the columns within the columns block is set to 0 with a 10px bottom margin. This removes the 2% left margin and makes sure the columns get separated by a small bottom margin.

You can place this code in you child theme’s style.css file, in the custom CSS section in the Customizer, or in the space provided by a custom CSS plugin.

/* Styling the columns block */
.wp-block-columns {
	margin-bottom: 20px;
}

.wp-block-column {
	margin: 0 0 0 2%;
}

.wp-block-column:first-child {
	margin: 0;
}

@media only screen and (max-width: 768px) {
	
/* Make the columns block responsive */
	
	.wp-block-columns {
	    display: initial;
	}

	.wp-block-columns .wp-block-column {
		margin: 0 0 10px;
	}
	
}

The resulting columns look like this (using three columns here):

With some CSS knowledge you can expand these rules and add all kinds of bells and whistles to it. Think background colors, borders around the content, etcetera. Your imagination is the limit.

If this method is too grassroots for you, Joe Casabona recently released an article on CSS-Tricks on how to go deeper into columns. But keep in mind, themes will soon be styling the columns for you, and most of our solutions will probably go out the window soon.

Are you using the columns block in your websites already? What solution do you use for styling them and making them responsive? Share in the comments below.

Resources

Styling the Gutenberg Columns Block (CSS-Tricks)