How to split a list in one ul into 3 columns

Question

I have ul inside the list. Is it possible to divide the list into 3 columns.

The structure of my html is as follows:

<ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul> 

Problem: I cannot directly edit the page and divide the list by 3 ul. I have to edit it using CSS.

Result: The final output should consist of 3 columns. And edited using CSS

Please help me.

Answer 1

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

Answer 2

if you don’t like the answer to the column (I like it myself, but it’s true that support is “iffy”, especially 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, albeit in a different order: instead

 1 4 7 2 5 8 3 6 9 

you will have

 1 2 3 4 5 6 7 8 9 

therefore, consider the pros and cons.

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

Answer 3

CSS3 flexbox can also do this:

 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> 

If you need 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>