Columns – core/columns
Display content in multiple columns, with blocks added to each column.
- 100 – one-column-full
One column - 50 / 50 – two-columns-equal
Two columns; equal split - 30 / 70 – two-columns-one-third-two-thirds
Two columns; one-third, two-thirds split - 70 / 30 – two-columns-two-thirds-one-third
Two columns; two-thirds, one-third split - 33 / 33 / 33 – three-columns-equal
Three columns; equal split - 25 / 50 / 25 – three-columns-wider-center
Three columns; wide center column
Use the Columns block to display content with multiple columns.
Screenshot
Example
Two columns with each showing the Block icon for the Column block, a level 3 heading and a paragraph block.
Column 1 Example
Column 1 paragraph
Column 2 Example
Column 2 paragraph
Notes
- The Columns block is populated with one or more Column blocks.
- Use the Content structure tool to see how your blocks are arranged and the Block Navigation tool to move between blocks.
- Change alignmentUse Change alignment to choose the alignment
- Align leftAlign to the left
- Align centerAlign in the center
- Align rightAlign to the right
- Wide widthIncrease the width of the block beyond the content size. Requires theme support.
- Full widthExtend the block to cover the full width of the screen. Requires theme support.
- Change vertical alignmentChange the vertical alignment of the columns
- Vertically Align TopVertically align the columns
- Vertically Align MiddleVertically align the columns to the middle
- Vertically Align BottomVertically align the columns to the bottom
Columns transforms to:
- Columns
- Group