Last Updated: June 14, 2019
·
2.149K
· arekjanik

Splitting lists with CSS3

The goal is to split a list into columns. Seems simple, and there are a couple ways to do it, however:

  • float breaks your list's order by displaying it horizontally,
  • CSS3 columns property is not supported in IE, while Firefox and webkit browsers require their prefixes,
  • and of course you can use JS plugins.

But there is a pure CSS3 solution, example shows 3 columns, each one contains at most 3 elements:

ul li {
    line-height: 20px;
}
ul li:nth-of-type(3n+4) {
    margin-top: -60px;
  }
ul li:nth-of-type(n+4) {
    margin-left: 120px;
}
ul li:nth-of-type(n+7) {
    margin-left: 240px;
}

Code breakdown:


ul li {
    line-height: 20px;
}

Setting li height.

ul li:nth-of-type(3n+4) {
   margin-top: -60px; 
 }

Move every 3rd li up, starting with 4th, set margin to 3 times li height.

ul li:nth-of-type(n+4) {
    margin-left: 120px;
}
ul li:nth-of-type(n+7) {
    margin-left: 240px;
}

Move the second and third column to prevent overlapping.

Here's a fiddle

Works on IE9, Opera, Chrome, Safari and Firefox.

3 Responses
Add your response

It is a penny that you are limited to a fixed number of items (in this case 9). Anyway t is not a problem in paginated lists, and less if you have an infinite scroll. I'll bookmark it to use in the future.

over 1 year ago ·

Good idea, but doesn't work for larger elements, or as @sembrestels said for longer lists: http://jsfiddle.net/S8NBy/7/

over 1 year ago ·

@zaus Sure it doesn't, as the spacing between columns is not in any way dependant on their content, only on the margin-left specified manually. But maybe my idea will inspire someone to make it more bulletproof :)

over 1 year ago ·