Columns / Column

Placing your content into columns is usually the key to producing a well-organized web page.

Block Options

When you initially select a column block from the block picker, you are prompted to select a common layout for your set of columns on the page. Choose one of the options from the icon row or select “skip” to roll your own layout.

Screen capture of the block editor displaying the default selections for the column block.

The column “block” is actually a group of nested blocks called core/columns and core/column respectively. Each of these two block types has its own options, so it’s important to know how to select the correct block to reveal the appropriate block options.

The easiest way to select the correct block is to use the List View panel, available in the top toolbar. From there, you can easily distinguish between the individual column blocks and the parent “columns” block wrapper.

Screen capture of the block editor displaying the control for the list view panel.

The “columns” block

The columns container block contains settings to quickly adjust the number of columns in the layout and to toggle the column’s ability to stack on a mobile device.

  • Adjusting the slider for the number of columns in a group will adjust all child columns to an equal width. This can effectively “wipe out” other custom widths for columns that you may have set up previously, so be careful.
  • When enabled, the “stack on mobile” feature will stack the columns from left to right.

Future versions of the block editor may introduce options to reverse-stack columns as needed. See the discussion at https://github.com/WordPress/gutenberg/issues/40706 for more details.

Until that improvement lands in a future version of WordPress, it is still possible to control the order of the column stacking with CSS and applied custom classes to the parent element.

Individual “columns”

Controls for the width of an individual column are found within the nested column blocks within the parent “container.”

Screen capture of the block editor displaying the column width settings control.

The width of each column can be set as a percentage of the “whole” width of the column set. You can be as precise as you want to be in declaring the value, but for ease of use try setting things in multiples of 5% or greater.

  • There’s no practical difference between 51.47% and 50% in terms of the design
  • But, the 1.47% difference may cause the columns to misbehave at certain viewport widths.

Padding and Spacing

Things to keep in mind when adjusting the padding of a set of columns:

DO: Adjust the padding on the container block to “inset” a column layout as needed.

  • The padding measurements on the parent “columns” block uses rem to make the creation of an “offset” space easier.

DON’T: Add padding to an individual column.

  • It will increase the width of the column as opposed to constraining the text within the column with some additional space.
  • If you need your columns to have some additional space, use a group block within the column to provide an additional wrapper for your column content.

DON’T: Use background colors on the “parent” columns container block.

  • Instead, check out the UDS Background Section block for a better way to add a background color or texture to a section on your page.