Spread CSS Columns Horizontally instead of Vertically

Question

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

item1        item4        item7
item2        item5        item8
item3        item6        item9

order them like this:

item1        item2        item3
item4        item5        item6
item7        item8        item9

given html like this:

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

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

Answer 1

There are two ways you can do this.

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

Here is the display: 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 fully supported in Edge. It's 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>