2

I want to divide the list into multiple column and each column should have maximum number of 5 data list same as shown in below image. Please guide how can I achieve this?

enter image description here

Awais Imran
  • 1,344
  • 3
  • 16
  • 29

4 Answers4

6

http://jsfiddle.net/U28rS/

CSS code:-

#cols {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

HTML:-

<div id="cols">
    <ul>
       lists 
    </ul>
</div>
user2804021
  • 151
  • 5
4

CSS3 columns should be the optimal choice (update: also flexbox), but unfortunately has not a wide support yet. You can achieve the same result with simple 2d-transforms (available also on IE9)

See http://jsfiddle.net/79rtx/1/

Basically all list-items are floated, the unordered list is rotated by -90deg. and list-items rotated by 90deg.

Relevant css

div { 
    border   : 1px green solid; 
    /* use easyclearing on div (or this workaround) */
    overflow : auto; 
    height   : auto;
}

/* clear */
ul + * { clear: both; }

ul {
   float : left;
   height : 160px; /* (30 + 2px) * 5 */ 

   -webkit-transform : rotate(-90deg);
   -moz-transform : rotate(-90deg);
   -ms-transform : rotate(-90deg);
   -o-transform : rotate(-90deg);
   transform : rotate(-90deg);
}

li:nth-child(5n+1) { clear: right; }

li {
   width      : 30px;
   height     : 30px;  
   float      : right;
   margin     : 1px;
   background : #ccc;

   -webkit-transform-origin : 50% 50%;
   -moz-transform-origin : 50% 50%;
   -ms-transform-origin : 50% 50%;
   -o-transform-origin : 50% 50%;
   transform-origin : 50% 50%;

   -webkit-transform : rotate(90deg);
   -moz-transform : rotate(90deg);
   -ms-transform : rotate(90deg);
   -o-transform : rotate(90deg);
   transform : rotate(90deg);
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • Can you please check http://jsfiddle.net/79rtx/235/ there seems to be issue in your code when number of list item is not dynamic and becomes one . – Prafulla Kumar Sahu Mar 23 '17 at 11:00
2

Use css3_column-count

CSS

 ul {
        column-count:4;
        -moz-column-count:4;
        -webkit-column-count:4;
    }

HTML

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
    <li>list item 7</li>
    <li>list item 8</li>
    <li>list item 9</li>
    <li>list item 10</li>
    <li>list item 11</li>
    <li>list item 12</li>
    <li>list item 13</li>
    <li>list item 14</li>
    <li>list item 15</li>
    <li>list item 16</li>
    <li>list item 17</li>
</ul>

DEMO

Sajad Karuthedath
  • 14,987
  • 4
  • 32
  • 49
0

CSS3 has properties to divide your content in columns: http://css-tricks.com/snippets/css/multiple-columns/. To have only five items on each column you can adjust the height of the list container.

Manuel Bécares
  • 88
  • 10