Columns

Columns blocks allow for arranging content in from two to six columns. Columns will stack on top of each other in a single column on small screens.

In each column you can insert any other block type(s) you want, including additional columns.

How to Use

1. Select Add block and choose Columns from the list (under the Layout Elements category).
2. The Columns block will present you with several preset layout options (two equal columns, three columns with a wide center column, etc.). You can either select one or the presets or choose the “skip” link to create your own. You can still modify it later if you choose a preset.
3. Once you have the Columns block inserted you can fill in your content by either inserting blocks using the add block button or dragging existing blocks into the columns.

Additional Options

You can modify several settings on both the Columns parent block and the individual columns child blocks.

Columns Block Parent Options

The Columns block itself has settings for changing the number of columns, the alignment and width of the block, and the vertical alignment of all of the child blocks. Select the main Columns block (usually clicking in between columns will work) to see the block options toolbar and settings sidebar.

• You can adjust the number of columns by adjusting the “Columns” slider in the block settings (in the sidebar).
• You can adjust the alignment (and width) of the Columns block by toggling wide or full alignment in the block toolbar.
  • Columns can be set to align none (the default), align wide, or align full. Wide and full alignment will expand to fill the content area, with or without margins.
• You can adjust the vertical alignment of the columns block to top, middle, or bottom in the block toolbar.
• You can apply a top and bottom border by changing the background color option in the block settings (in the sidebar).

Columns Block Child Column Options

Select the individual column blocks inside of the Columns block to modify settings specific to each column.

• You can adjust the percentage width of the main Columns block an individual column occupies by changing the “Percentage width” setting in the block sidebar settings.
• You can adjust the vertical alignment of an individual column to top, middle, or bottom in the column block toolbar.
• You can apply a top and bottom border by changing the background color option in the block settings (in the sidebar).

Examples

Columns block with three equal columns and default alignment of none

Columns block with four even columns and wide alignment

Columns block with three columns, featuring a wide center column, wide alignment, and a border.

Source

This is a WordPress-created core block that is built in to WordPress.