Single List with Multiple Columns ala CSS3

Long lists need to be displayed differently on different devices generally. CSS3 can ease your pain by dividing these up for you via the column-gap property.

Apply your css like so:

Create a simple:

Render!

To extend this, you can then utilize media queries to have a different number of columns on different devices / screen sizes. This will keep your lists together, if they are long, rather than needing to divide them up in order to make them “look” even in the page.

Check out a demo or view it below…


1