NewThe WP Tutoring WordPress training platform is live — on demand video courses and interactive WordPress lessons. Free lessons included.Start free
Helping site owners learn WordPress since 2012 · (844) WP-TUTOR
Block Editor

Multiple Columns in Gutenberg (the Columns Block)

Build side-by-side layouts with the WordPress Columns block: pick a layout, fill each column, set widths, and keep it readable on mobile.

WT
WP Tutoring TeamWordPress Instructors
Updated Aug 3, 2026
3 min read

The Columns block is how you put content side by side in WordPress — feature lists, image-and-text pairs, pricing comparisons — without touching a page builder or CSS.

We re-shot this tutorial from scratch in August 2026 on WordPress 7.0; the screenshots below are exactly what the current editor shows.

TL;DR The 30-second version
  • Insert the Columns block and pick a layout (50/50, 33/66, three columns…).
  • Click the + inside each column to add any block to it.
  • Column widths live in the Settings sidebar with the column selected.
  • Leave Stack on mobile on so the layout collapses gracefully on phones.
Insert the Columns block

In the post or page editor, click the blue + in the top-left corner and search for columns. Click the Columns block to insert it.

Searching for the Columns block in the block inserter

Pick a layout

The block first asks you to "Divide into columns. Select a layout" — equal halves (50/50), a sidebar-style 33/66 or 66/33 split, three equal columns, and more. Click one to start with it; you can change everything later. (Your theme may also offer ready-made styles for the block in the sidebar, like the Style presets you can see here in Twenty Twenty-Five.)

The Columns block layout picker showing 50/50, 33/66 and other splits

Add content to each column

Each empty column shows a + button. Click it, choose a block — a paragraph, image, heading, button, anything — and fill it in. Repeat for the other column(s). Here's a two-column layout with a paragraph in each:

A two-column layout with text in both columns

The toolbar above a selected block includes left/right movers, so you can also shuffle a column's position without rebuilding anything.

Adjust a column's width

Click into a single column, then open the settings sidebar (the panel icon in the top-right corner if it's closed). Under Settings → Width, type a value and pick a unit — percentages keep the layout proportional, which is usually what you want. The List View button (three staggered lines, top-left) is the easiest way to select exactly the column you mean.

The Width setting for a single selected column

Change the column count and mobile behavior

Now select the parent Columns block (easiest via List View, or the breadcrumb at the bottom of the editor). Its sidebar has the two settings that matter most:

  • Columns — a slider to add or remove columns (up to six).
  • Stack on mobile — on by default; columns collapse into a single stack on narrow screens so nothing gets squeezed unreadable.

The parent Columns block settings: column count slider and Stack on mobile toggle

Style it (optional) and publish

With the Columns block selected, the Styles tab (half-circle icon at the top of the sidebar) holds text and background colors plus any style presets your theme provides — an easy way to turn a row of columns into a highlighted band.

The Styles tab for the Columns block with color controls

When it looks right, click Publish (or Update) and check the live page.

Removing a column or the whole block

Select the column (List View makes this precise), open the three-dot menu in its toolbar, and choose Delete. The remaining columns share the freed space. The same menu on the parent Columns block removes the entire layout.

Layout fighting back?

Columns are the point where many self-taught WordPress users hit their first real layout frustration. If yours won't line up, we untangle exactly this in a one-on-one tutoring session — on your site, not a demo.

Keep learning

Frequently asked questions

How many columns can the Columns block have?
Up to six. Select the parent Columns block and use the Columns slider in the Settings sidebar. Two or three columns is the practical sweet spot — six gets cramped fast on anything smaller than a desktop monitor.
Why do my columns stack on top of each other on phones?
That's the "Stack on mobile" setting doing its job — it's on by default so narrow screens get one readable column instead of several squeezed ones. You can turn it off in the parent Columns block's settings, but for text content you almost never should.
Can I put any block inside a column?
Nearly all of them — paragraphs, images, headings, buttons, even another Columns block. Click the + inside a column and pick any block, exactly like adding one to the page itself.
WT

WP Tutoring Team

WordPress Instructors

We’ve been teaching WordPress to individuals and businesses since 2013 — through step-by-step tutorials, video courses, and 1-on-1 tutoring sessions.

Leave a comment

Comments are reviewed before they appear.

Get our free WordPress starter guide

Join thousands of site owners and get step-by-step WordPress tutorials in your inbox, plus printable cheat sheets.

Beginner-friendly, no jargon
Printable cheat sheets & checklists
Unsubscribe anytime

Request your session

We’ll reply quickly — usually the same business day.

By using this form you agree with the storage and handling of your data by this site.

Access our WordPress Training Academy videos

Step-by-step video courses covering the block editor, themes, plugins, and everything you need to build a site you’re proud of. Free lessons included — browse the full library before you sign up for anything.

Explore the Academy