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