How to divide list in a single ul into 3 columns

Question

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

The structure of my html is like this:

 <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 in to 3 ul. I must edit it via CSS.

Output: The final output should have 3 columns. And edited via CSS

Please help me.

Answer 1

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