CSS Column Spread Horizontal, Not Vertical

Question

I'm not quite sure if this is possible (at least not from my experience or Googling), but I was wondering if there is a way to force the order of the CSS columns. For example, instead of:

item1 item4 item7 item2 item5 item8 item3 item6 item9 

order them as follows:

 item1 item2 item3 item4 item5 item6 item7 item8 item9 

given html:

 <ul> <li>item1</li> <li>item2</li> etc... </ul> 

Of course, I could use a table (no thanks) or float, but I was hoping to use the CSS columns property.

Answer 1

There are two ways to do this.

Or use display: inline-block; or use display: flex;

Here is the screen: inline-block; Example:

 ul { margin-left: .25em; padding-left: 0; list-style: none; } li { margin-left: 0; padding-left: 0; display: inline-block; width: 30%; vertical-align: top; } 

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

And here is the display: flex; Example:

Note. Flex is somewhat supported in IE11, but is fully supported in Edge. It is fully supported in all evergreens.

 ul { margin-left: .25em; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; } li { margin-left: 0; padding-left: 0; width: 33.3%; } 

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