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
– Eric, Commented Sep 6, 2012 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
– Jon, Commented Sep 6, 2012 at 18:45
I think JavaScript would be a better tag than "dynamic" here... — Eric
– Eric, Commented Sep 6, 2012 at 18:47
How would you do this with JavaScript? Sorry, my JS is not that advanced. — Jon
– Jon, Commented Sep 6, 2012 at 20:29

Leniel Maccaferri · Accepted Answer · 2012-09-06 19:15:14Z

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 6, 2012 at 19:15

answered Sep 6, 2012 at 17:52

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jon Over a year ago

I like the solution, but unfortunately silly IE doesn't support it.

Leniel Maccaferri Over a year ago

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. :)

Jon Over a year ago

Hm... I'll keep investigating for another solution that is compatible with IE, but I'll use this as my fall back.

Jack Sharpe · Accepted Answer · 2012-09-06 18:03:45Z

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 6, 2012 at 18:03

Jack Sharpe

343 bronze badges

2 Comments

Jon Over a year ago

I don't want to be adding a <ul class="sub"> for every 5th element. I am going to be working with lots of elements and injecting a few additional elements every now and then in random spots. Hard coding which column each element goes in my list will make my code extremely hard to maintain in the future.

Jack Sharpe Over a year ago

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

Collectives™ on Stack Overflow

Auto Create Columns Using Single Plain List

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related