Auto Create Columns Using Single Plain List

Question

I am trying to write flexible code where I have one plain <ul> which gets automatically creates another column for every 5th element. I have found a tutorial that achieves this but places the items in a horizontal order whereas I require a vertical order. I have seen some other tutorials that outputs a vertical order, but also attaches class="first" and class="second" to each li which is not what I want. I am looking to do with with my existing HTML code.

What I Want:

-01     -06     -11   
-02     -07     -12
-03     -08     -13
-04     -09     -14
-05     -10     -15

What I Have:

-01     -02     -03   
-04     -05     -06
-07     -08     -09
-10     -11     -12
-13     -14     -15

CSS:

ul {
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
}

li {   
    float:left;
    display:inline;
}

.double li  { width:50.0%; } /* 2 col */
.triple li  { width:33.3%; } /* 3 col */
.quad li    { width:25.0%; } /* 4 col */
.six li     { width:16.6%; } /* 6 col */

HTML:

<ul class="triple">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

If you need to support IE, you're gonna have to use JavaScript or change your markup. Otherwise, you could use `:nth-child(5n)` and the like. — Eric, Sep 06 '12 at 18:42
JavaScript is definitely an option. I can modify my HTML as long as I am not adding any classes/divs within the `ul` itself. I'll take a look at `:nth-child()`. — Jon, Sep 06 '12 at 18:45
I think JavaScript would be a better tag than "dynamic" here... — Eric, Sep 06 '12 at 18:47
How would you do this with JavaScript? Sorry, my JS is not that advanced. — Jon, Sep 06 '12 at 20:29

Leniel Maccaferri · Accepted Answer · 2012-09-06T19:15:14.153

4

You can use this code:

ul
{
    -webkit-column-count: 4; -webkit-column-gap:20px;
    -moz-column-count:4; -moz-column-gap:20px;
    -o-column-count:4; -o-column-gap:20px;
    column-count:4; column-gap:20px;
}

but I'm not sure if it works in all browsers unfortunately. You should experiment that.

Here's the jsFiddle to play with it: http://jsfiddle.net/leniel/nRL4R/

edited Sep 06 '12 at 19:15

answered Sep 06 '12 at 17:52

Leniel Maccaferri

100,159
46
371
480

I like the solution, but unfortunately silly IE doesn't support it. – Jon Sep 06 '12 at 17:55
Yeah... it's a very clean solution. You just have to apply the `ul` styles and take out all the other ones. IE is really a bad guy when it comes to applying CSS properties. :) – Leniel Maccaferri Sep 06 '12 at 17:56
Hm... I'll keep investigating for another solution that is compatible with IE, but I'll use this as my fall back. – Jon Sep 06 '12 at 17:57

score 0 · Answer 2 · answered Sep 06 '12 at 18:03

0

http://codepen.io/anon/pen/iDzmq

This is the only way i know of doing this. just in the code you are using to render the lists set it to add a ul.sub every 5th li

Any Questions?

answered Sep 06 '12 at 18:03

Jack Sharpe

34
3

I don't want to be adding a `
– Jon Sep 06 '12 at 18:07
What code are you using because this could always be a simple case of a loop that will take all the values in an array and then process them with a count that will add the custom class on the 5th element. if you are using PHP I can script you something up pretty quick – Jack Sharpe Sep 19 '12 at 21:57

Auto Create Columns Using Single Plain List

2 Answers2

Linked