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.

Not possible using column properties, but what's wrong with floats? — nice ass, May 11 '13 at 18:51
Because in my instance, it doesn't make sense to use tables. It's a list. Nothing wrong with floats, inherently, I was just curious if it were possible with the CSS columns property. — Jason, May 11 '13 at 18:54
English humor has told me that if it floats, it may be either a witch or the solution to your problem — FelipeAls, May 11 '13 at 19:00
A quick fiddle showing both: http://jsfiddle.net/David_Knowles/Q4TXn/ — Timidfriendly, May 11 '13 at 19:16

score 1 · Answer 1 · answered May 06 '16 at 03:53

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>

thanks. i was hoping for some property in the `columns` family though when I asked this question, i think :) — Jason, May 06 '16 at 15:44
Yeah, figured as much but wanted to give you two other options in case you don't find a columns solution. — haltersweb, May 06 '16 at 16:39

Spread CSS Columns Horizontally instead of Vertically

1 Answers1

Linked