CODEWITHSUNDEEP
css
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40633

CSS: how to make a list wrap vertically?

I have a somewhat long list and want it to "wrap" into vertical columns. Say I have a list of 10 items and I want it to be 5 items per column, the layout should be like this:

1   6
2   7
3   8
4   9
5   10

Is there a way to do this in CSS?

Upvotes: 9

Views: 7932

Answers (2)

jackcogdill
jackcogdill

Reputation: 5122

Sorry, it's actually super simple:

ul {
-webkit-column-count: 2;
   -moz-column-count: 2;
        column-count: 2;
}

Check out this DEMO

Upvotes: 17

icktoofay
icktoofay

Reputation: 129001

Use CSS3 columns. In particular, if you set column-width, it should make as many columns as necessary. If you want it to prefer going down rather than giving each column an equal number amount of items, you can set column-fill to auto.

Upvotes: 8

Related Questions