Multi column paragraph blocks

Here is an example of a Paragraph block that has been styled to be displayed in two columns. For more information on the CSS you can use to make the columns work responsively see the link below. Similar CSS should also apply for lists. You can also apply the logic to the group block, creating the effects seen in the guide. This example uses a Custom CSS block CSS – oik-css/css to write the CSS code to style the paragraph block. The Additional CSS classname ( col2 ) is used to apply the formatting to this paragraph.

Display a paragraph with Additional CSS class col2 in two columns, with a minimum width of each column being 250px and a gap of 50px.p.col2 { columns: 2; column-width: 250px; column-gap: 50px}

Here is an example of a Paragraph block that has been styled to be displayed in columns with a minimum width of 150px. The number of columns is not specified. The browser calculates how many columns it can display. The Additional CSS classname ( colw150 ) is used to apply the formatting to this paragraph. See the CSS below. Note: The CSS gets applied in both the block editor and the front end. It can make editing the content interesting.

Here we just specify the col-width. The browser works out how many columns to use..colw150 { column-width: 150px; }