Block Editor – Columns Block

The Columns block can be very useful in helping to create attractive and interesting page layouts.

You may choose from a variety of column layouts. Number of columns and column widths can easily be changed later, in the settings. Up to 6 columns are supported natively.

The columns block has class wp-block-columns, the inner columns each having class wp-block-column. Sizing and spacing are managed by the editor and can be modified in the settings. All of the usual settings – colour, typography, dimensions (margin and padding), and also border – are available.

Example Columns Block with 3 Columns

Option 1

Some useful nformation about this first option.

Option 2

Learn more about this great option and consider this great benefit.

Option 3

A third alternative to consider – the last is often the best!

Columns on Mobile

On mobile devices, the columns rearrange to stack one on top of the other. This is optional and can be changed in the settings, but is usually desirable. The breakpoint is at 782px.

Columns shown on mobile, stacked one on top of another.

Column Vertical Alignment

One very useful option is the ability to set the vertical alignment of the content within the columns. This can be set for all columns overall, and also at the individual column level. Content can sit at the top, in the middle, or at the bottom.

Sample image centred within its column in the columns block

This content is in 2 equal columns and the text is vertically centred.

Image which is placed at the bottom of the column in the columns block

Columns

This content is in two columns, the image in one column, the text in another.

The columns block is wrapped within a full-width group, which has the coloured background.

The inner columns are each 50% width (on desktop). The column containing the image is set to vertical-align bottom. The column containing the text is set to vertical-align middle.

Columns and Group blocks, along with Cover Image and Media & Text, are the blocks which are most useful in building page layouts.  Read more about Page Layout with the Block Editor.