How to divide list in a single ul into 3 columns

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

CSS3 flexbox can also do this as well:

ul {
  flex-direction: column;
  flex-wrap: wrap;
  display: flex;
  height: 100vh;
}
ul li {
  flex: 1 0 25%;
}

Above css will create the following layout:

+--------------------+
|  01  |  05  |  09  |
+--------------------+
+--------------------+
|  02  |  06  |  10  |
+--------------------+
+--------------------+
|  03  |  07  |  11  |
+--------------------+
+--------------------+
|  04  |  08  |  12  |
+--------------------+


* {box-sizing: border-box;}

body {
  margin: 0;
}

.list {
  flex-direction: column;
  list-style: none;
  flex-wrap: wrap;
  height: 100vh;
  display: flex;
  padding: 0;
  margin: 0;
}

.list li {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;
}

.col1 {
  background: blue;
}

.col2 {
  background: orange;
}

.col3 {
  background: green;
}
<ul class="list">
  <li class="col1">Test 1</li>
  <li class="col1">Test 2</li>
  <li class="col1">Test 3</li>
  <li class="col1">Test 4</li>

  <li class="col2">Test 5</li>
  <li class="col2">Test 6</li>
  <li class="col2">Test 7</li>
  <li class="col2">Test 8</li>

  <li class="col3">Test 9</li>
  <li class="col3">Test 10</li>
  <li class="col3">Test 11</li>
  <li class="col3">Test 12</li>
</ul>

In case you wants the following layout:

+-----------------------+
|  1  |  2  |  3  |  4  |
+-----------------------+
+-----------------------+
|  5  |  6  |  7  |  8  | 
+-----------------------+
+-----------------------+
|  9  |  10 |  11 | 12  |
+-----------------------+

you can use the following css:

ul {
  flex-wrap: wrap;
  display: flex;
}
ul li {
  flex: 1 0 25%;
}


* {box-sizing: border-box;}

body {
  margin: 0;
}

.list {
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  padding: 0;
  margin: 0;
}

.list li {
  border-bottom: 1px solid #fff;
  flex: 1 0 25%;
  padding: 10px;
  color: #fff;
}

.list li:nth-child(4n + 1) {
  background: blue;
}

.list li:nth-child(4n + 2) {
  background: orange;
}

.list li:nth-child(4n + 3) {
  background: green;
}
.list li:nth-child(4n + 4) {
  background: purple;
}
<ul class="list">
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>

  <li>Test 5</li>
  <li>Test 6</li>
  <li>Test 7</li>
  <li>Test 8</li>

  <li>Test 9</li>
  <li>Test 10</li>
  <li>Test 11</li>
  <li>Test 12</li>
</ul>

if you don't like the column-count answer (I like it myself but it's true that support is "iffy", specially in IE), you can simply do this:

ul li{width:33.333333%; float:left;}

or even

ul{display:block;}
ul li{display:inline-block;}

But this way you will have 3 columns although in different order: instead of 

1   4   7
2   5   8
3   6   9

you'll have

1   2   3
4   5   6
7   8   9

so consider the pros and cons.

Personally, I'd use monkeyinsight's answer, but if you need another option, here you have

Tags:

Html

Css

Frontend

Recent Posts