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');
Explore different ways to do this with various kinds of content. Perhaps even other kinds of blocks. The CSS class name can be called something else. One will most likely need to adjust the content for it to show up correctly.
