Flowing text from one column to the next

In an InDesign document one can have text flow from one column to the next. As a magazine layout. To accomplish this with WordPress one can use a code snippet – a small piece of code to make this work.

First add a Columns block with only one column in it. Additional columns will be created based on the need of the text flow. In the first column under Advanced in the Additional CSS class(es) add: paragraph-split-columns (The class name that we use). Then adjust the alignment in the top parent Columns to Wide width.

Add the following PHP code into a code snippet. I named the code snippet “Split content into multiple columns”

function add_custom_multi_column_css() {
    $css = '
    .paragraph-split-columns {
        column-count: 4; /* Adjust based on the amount of columns you want to use)
        column-gap: 2em;
    }
    @media (max-width: 1024px) {
        .paragraph-split-columns {
            column-count: 2;
        }
    }
    @media (max-width: 750px) {
        .paragraph-split-columns {
            column-count: 1;
            column-gap: 1em;
        }
    }
    ';

    wp_add_inline_style('wp-block-library', $css);
}
add_action('wp_enqueue_scripts', 'add_custom_multi_column_css');
add_action('enqueue_block_editor_assets', 'add_custom_multi_column_css');