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
– nice ass, Commented May 11, 2013 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
– Jason, Commented May 11, 2013 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
– FelipeAls, Commented May 11, 2013 at 19:00
A quick fiddle showing both: jsfiddle.net/David_Knowles/Q4TXn — Timidfriendly
– Timidfriendly, Commented May 11, 2013 at 19:16

haltersweb · Accepted Answer · 2016-05-06 03:53:42Z

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>

answered May 6, 2016 at 3:53

haltersweb

3,1742 gold badges16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Over a year ago

thanks. i was hoping for some property in the columns family though when I asked this question, i think :)

haltersweb Over a year ago

Yeah, figured as much but wanted to give you two other options in case you don't find a columns solution.

Collectives™ on Stack Overflow

Spread CSS Columns Horizontally instead of Vertically

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related