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
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.
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.
This content is in 2 equal columns and the text is vertically centred.
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.