{"id":11285698,"date":"2019-03-07T12:21:53","date_gmt":"2019-03-07T12:21:53","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11285698"},"modified":"2026-05-25T15:26:25","modified_gmt":"2026-05-25T15:26:25","slug":"columns-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/columns-block\/","title":{"rendered":"Columns block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/strong><\/a><\/p>\n\n\n\n

The Columns block allows you to insert text, media, and other types of content into columns. When used one after another, the columns can create a grid effect. <\/p>\n\n\n\n

You can type \/<\/em>columns<\/code> and hit enter in a new paragraph block to add one quickly.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n

Once you add the Columns block, you can choose a variation to start with. You can change the number or add more columns later in the block settings. If you select Skip at the bottom, you will start with 50\/50 columns by default.<\/p>\n\n\n\n

\"Columns
Column variations you can start with<\/figcaption><\/figure>\n\n\n\n

Adding and removing columns<\/h2>\n\n\n\n

It is possible to add or remove columns in a few different ways:<\/p>\n\n\n\n

    \n
  1. Hover between two existing columns and select the +<\/strong> icon to add another column in that spot.<\/li>\n\n\n\n
  2. Use the Columns slider or number field in the block settings sidebar to change the number of columns (up to six is recommended).<\/li>\n<\/ol>\n\n\n\n

    Remove a column by selecting the individual Column block, then choosing Delete from the More options menu (three dots) in List View<\/a> or the block toolbar.<\/p>\n\n\n\n

    Adding content to columns<\/h2>\n\n\n\n

    Once you have defined the number of columns, you can add content to each column. The amazing thing about the columns block is that you can add other blocks into each of the columns.<\/p>\n\n\n\n

    For instance, you can use the Columns block as the structure and add an image, heading, and paragraph block to create a grid of services.<\/p>\n\n\n\n

    \"Columns<\/figure>\n\n\n\n

    Or you can use the Cover block<\/a> inside a Columns block to create a row of visual cards.<\/p>\n\n\n\n

    \"Columns<\/figure>\n\n\n\n

    You can also use the Columns block with Buttons block<\/a> to show a small set of related actions side by side. To make the buttons the same width, add one Button block to each column and set each button to 100% width.<\/p>\n\n\n\n

    \"<\/figure>\n\n\n\n

    Block toolbar<\/h2>\n\n\n\n

    Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n

    The Columns block shows the following buttons:<\/p>\n\n\n\n