Columns Block

The Columns block is one of the most common and powerful layout tools in WordPress. It lets you place content side-by-side in two or more vertical columns, which is useful for everything from simple two-column text layouts to more designed “card grid” sections.

Columns can also be one of the trickier blocks for editors at first — mostly because there are a lot of layout options. The good news: you don’t always need to build Columns from scratch. Many Patterns include pre-configured Columns layouts, and copying/pasting a Columns section you know works can save time and keep spacing consistent.

Start here: watch the walkthrough (7 minutes)

Why use the Columns block

Use the Columns block when you need a layout with content side-by-side, such as:

Two-column text + image layouts
Feature or service sections (often paired with card blocks)
Side-by-side lists, stats, or callouts
Structured sections that benefit from scanning across a row
Template-style layouts with main content and a sidebar (for example, a content area on the left and supporting content on the right)

Columns are best used for layouts with 2, 3, or 4 columns. More than four typically compresses content too much and becomes harder to read, especially on smaller screens.

Note: On desktop screens, a Columns block is a single row of columns. If you need multiple rows, use multiple Columns blocks, one per row.

When another block might be a better fit

Columns are powerful, but they’re not always the simplest option.

For example, the Media & Text block already provides a two-column layout designed specifically for pairing media with content. If your layout is just “image + text,” Media & Text can be easier to use and requires fewer layout decisions than building the same structure with Columns.

How to use the block

Start by adding the Columns block to the page. Learn how to add blocks.

Once the block is added, editors typically:

Choose a starting layout (for example, 50/50, 33/66, 33/33/33, or 25/75)
Add blocks inside each Column (each column is an inner container)
Adjust column widths (usually percentages)
Configure stacking behavior on mobile
Tune spacing between columns (Block spacing) when needed

Choosing a starting layout

When you add a Columns block, WordPress provides several layout options to start from (two-column splits, three equal columns, etc.).

Adding a column inside a Columns block

Each Columns block contains one or more Column inner blocks.

To add another column:

Select the Columns block (use List View if needed)
In the block settings sidebar, find Number of columns
Increase the number to add a new column

Another way to add another column:

Select any Column block
In the block toolbar, open the three-dot menu (Options)
Select Add before or Add after to add a new column before or after the selected column

Reordering columns

To move a column left/right within the row:

Open List View
Expand the Columns block to see each Column
Drag the Column up/down in the list (order in List View matches left-to-right order on the page)

Another way to move columns within the row:

Select any Column block
In the block toolbar, use the Move Left (left arrow) or Move Right (right arrow) options to move the selected column

Removing a column

Select the Column you want to remove in the editor or list view
Use the three-dot menu (Options) and choose Delete — or press Delete/Backspace.

The block toolbar appears above the Columns block when it’s selected.

Block width: Controls how wide the overall Columns block appears in the layout (depends on your theme’s layout options)
Vertical alignment: Aligns the contents of all columns to the top, middle, or bottom. This applies across the entire Columns block

When the Column block is selected:

Move left and Move right: Move the position of an individual column to easily re-order

Block settings

Columns settings

Block settings appear in the right sidebar while the Columns block is selected.

Number of columns: Sets how many columns exist inside the Columns block. Use this to quickly add or remove columns without rebuilding the layout.

Stack on mobile: Controls whether columns display side-by-side or stack vertically on smaller screens. In most cases, stacking should be enabled for readability on mobile.

Column settings

Each individual Column has its own settings. To access them, select a Column (best done via List View).

Inner blocks use content width

This is a layout option that constrains content inside the column to a narrower width.

Recommended default: Leave this disabled so content can use the full column width
Use it only when you intentionally want a narrower content area inside a wide column

When enabled, you can set a content width (pixel value) and justify the constrained content left/center/right.

Column width

This is the most important layout control for Columns.

Leave empty for auto width (the column fills available space based on the other columns)
Use percentages for most layouts (recommended for responsive behavior), such as:
- 25%, 33%, 50%, 66%,75%
Advanced options may also accept values like px, em, rem, or vw, but percentages are typically best for editors

Tip: If you set one column to a percentage (for example, 66%), leave the other column empty to let it auto-fill the remaining space.

Stick column on scroll

When enabled, the selected column will “stick” as the user scrolls within the section. The sticky behavior applies to tablet and desktop screens larger than 782px.

Best practices:

Use this only in 2-column layouts
Enable it on only one column per row
Apply it to a column that is not the tallest column:

Block styles

The Styles tab in the block settings sidebar includes visual controls.

Columns styles

Text color: Changes text color for content inside all columns.
Font size: Generally avoid setting font size on the Columns container. Instead, apply typography styles to the specific blocks inside each column.
Dimensions
- Padding / Margin: Use sparingly; default spacing is usually best.
- Block spacing: Controls the space between columns on desktop and the space between stacked columns on mobile. This is one of the most useful settings for fine-tuning layout rhythm.
Shadow: Can be applied to the Columns block (affects the container) or to individual Column blocks (affects one column).

Column styles

When a single Column is selected:

Text color: Applies only within that column.
Font size: Generally avoid; style individual blocks instead.
Dimensions (Padding): Useful when you want more breathing room inside one column (for example, around a card-like grouping).
Shadow: Applies only to that column.

Accessibility and content structure

Columns change layout, but they should not change meaning.

Build content in a logical order. When columns stack on mobile, content will read top-to-bottom in the order it appears in the editor. Use that order intentionally.
Use headings properly within columns. Don’t skip heading levels just because content is visually arranged side-by-side.

Tips for editors

Use patterns or copy/paste to stay consistent

Columns can be time-consuming to build perfectly. If you already have a Columns section that looks right, duplicate it and update the content. This is often faster (and more consistent) than rebuilding a new Columns layout from scratch.

Start simple

Use common layouts first: 50/50, 33/66, 66/33, 33/33/33, or 25/75
Complex column grids take practice.

Use percentage widths for responsiveness

Percentages are usually the best choice for editors because they adapt more gracefully across screen sizes.

Keep column count reasonable

2–4 columns is usually the sweet spot. If you need more items, consider multiple rows (multiple Columns blocks), or rethink the layout pattern.

Use Block spacing before adding “helper” blocks

If columns feel cramped or too far apart, adjust Block spacing rather than inserting Spacer blocks or empty content.

Please note that your block may have customizations affecting functionality, appearance, or settings.