Split Unordered List Into Multiple Columns using CSS3 Property

Last updated on September 3rd, 2017 by Paritosh Pandey


I recently stumbled onto a CSS3 property multi columns. I am very impressed to see such kind of tricks, CSS3 column-count property is used to present list such as ordered List and unordered list into multiple columns.

Ordered & Unordered List

In default these elements (<ul> and <ol> element) display a simple conventional vertical list, following is an <ol> element list with its default display-

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List item 4

and following is an <ul> element list with its default display-

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

of course it is not coming to that level when we talk about World level websites.

Can we style our List elements?

Yes we have a CSS3 property column-count to dress it up our default <ul> & <ol> elements, however this property can applicable with any block level elements, in our future post we definitely talk about how to apply this property with other elements, in this post I am going to focus on only <ul> and <ol> element.

How to use this CSS3 property

Below is an ordered list (<ol>) demonstrated with 3 columns, as you can see lists are arranged in 3 columns not in their conventional look.

css3 multi column

the css code is as follow-


li{
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
}

 

If you found this article helpful don’t shy to share.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *