Change list arrangement - HTML & CSS

Question

I got list like below

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

How do make the list arrangement to like this.

 1  2    5  6    9  10
 3  4    7  8   11  ....etc

or

 1  3    5  7     9 11
 2  4    6  8    10 .... etc 

I need this arrangement because i'm using angular ng-repeat, so i need every number has the same element. I dont mind if you guys give the answer using other element, but every number must have same element. Thanks

p/s: the number will increase when scroll, like infinite scroll.

Answer 1

You can split your content into 2 columns.

ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30%;
    -moz-column-gap: 30%;
    column-gap: 30%;
    width: 100%;
}

li {
    display: inline-block;
    width: 35%; /* (parent 100% - parent gap 30%) / columns */
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

The solution above works when you have 8 or less li items.

But if the number of items is unknown, you can place a class to figure out the number of columns. For example, consider you have in your angular model a variable qtItems. You can do something like this:

<ul ng-class = "'col' + Math.ceil(qtItems/4)">

Then use CSS for each class:

ul {
    width: 100%;
}
ul li {
    display: inline-block;
}

ul.col2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30%;
    -moz-column-gap: 30%;
    column-gap: 30%;
}

ul.col2 li {
    width: 35%;
}

ul.col3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20%;
    -moz-column-gap: 20%;
    column-gap: 20%;
}

ul.col3 li {
    width: 20%;
}

ul.col4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10%;
    -moz-column-gap: 10%;
    column-gap: 10%;
}

ul.col4 li {
    width: 15%;
}

Answer 2

Get the number of LI items and divide it by the number of rows and set that value to column-count property.

$(document).ready(function() {
var numitems =  $("#myList li").length;

$("ul#myList").css("column-count",Math.round(8/2)); /*   number of items / row  */
});

ul {
  width: 200px;
}
li {
  width: 25px; /*   200px / 8 = 25px   */
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>    
</ul>

You need to set the width of UL, because number of rows will depend on the width also even after setting the column-count. You can set it to 100% too, but then the number of rows will change based on the window size. To restrict the number of rows to 2, fixed width for UL may be required.

Credits to Poornima

With some modifíing I could get along with this. It's not what you wanted, but maybe it will help others in need.

Answer 3

you can take two ul in one ul and you can adjust which you exactly want to see.

HTML

   <ul class="mainul">
    <li>
        <ul class="subul">
            <li>1</li>
            <li>2</li>
            <li>5</li>
            <li>6</li>
         </ul>
     </li>
     <li>
         <ul class="subul">
            <li>3</li>
            <li>4</li>
            <li>7</li>
            <li>8</li>
        </ul>
       </li>
    </ul>

CSS:

.mainul
{
 list-style-type:none;
}
.subul
{
    list-style-type: none;
}
.subul li
{
    display:inline;
}