列元素（网格）中的li元素显示

Question

I have <li> elements inside of an <ol> and would like to display it as shown below; can someone give me the css code to achieve this? I have generated these <li> elements with php so the HTML looks like this:

<ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
</ol>

and I would like to be displayed like this:

http://www.jqueryscript.net/demo/Accessible-Touch-Friendly-Drag-Drop-Html-List-with-jQuery/

Above is an example, with jQuery, with that I am working channels editor and would like to get this like in image. I tried with display inline, width and height but no go, so I can't get it to work.

Answer 1

While not the best for older versions of IE, the only way I am aware of to achieve your desired results is by using the CSS3 column-count element.

CSS

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