How to Split a List into Two Columns with Pure CSS

Today I stumbled onto CSS3 multi columns. I got pretty excited because it’s actually a very useful feature for dynamic content when you want to display content into two columns. You can use these CSS3 properties to split a paragraph into two columns but I wanted to share sample code from a list because I can see more application there.

So here’s a snippet of the html – nothing really new here, just a regular unordered list:

[code language=”html”]
<!– HTML CODE –>
<ul class="two-columns">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
</ul>

[/code]

Then here’s the snippet of CSS where I seperate the list into two columns (column-count: 2;) and I create a 40px gap between the two columns (column-gap: 40px;) :

[code language=”css”]
<!– CSS CODE –>
.two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-gap: 40px;
}
[/code]

Demo:
See the Fiddle

Compatibility: 

IE 10+, Works well on Chrome with -webkit- prefix and Works well on Firefox with -moz- prefix (see more details here: CSS3 Multiple Column Layout )

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.