Multi column list

At the WordPress Portsmouth Online Meetup in October one of the questions that was asked was “Is there a way to create responsive columns where the text flows?”

Here is an example that you may find useful to create Multi column lists.

  1. Start creating your list.
  2. Choose how wide you want each column to be.
  3. Create some custom CSS for the list block.
  4. Either use Customise > Additional CSS or the inline CSS method below.
  5. Add the class name to the list block.
  6. Create enough list items to make it worthwhile.
  7. Adjust the CSS to sensible values.
  8. Save and test on the front end.
  9. See what else you can do to style it nicely.

This solution uses:

  • Custom CSS defined using the CSS – oik-css/css block from the oik-css plugin.
  • An Additional CSS class ( col250px ) applied to the list that needs to be multi column.
Custom CSS to create the Multi column list block..col250px { column-width: 250px;  column-gap: 50px;}

See also Multi column paragraph blocks