How to split a list of links into 3 columns with CSS3?

Question

I have a link list like that:

<div id="linklist">
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
</div>

Now I want to have them in 3 columns with (in this example) 2 links per column. I know that there is a CSS3 property column-count and such others but somehow the links are in one single row. (I'll add the -webkit- prefix if needed later.)

CSS:

#linklist a {
    display: inline-block;
    margin: 3px;
    padding: 4px;
    -moz-column-count: 2;
}

possible duplicate of [Is there a way to break a list into columns?](http://stackoverflow.com/questions/6509106/is-there-a-way-to-break-a-list-into-columns) — TylerH, Jul 07 '15 at 21:26

score 18 · Accepted Answer · edited Nov 23 '11 at 00:18

Something like this jsFiddle?

#linklist {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;  
}
#linklist a {
   display: block;
}

TheCSS column-* properties you have at your disposal are: column-width, column-count, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns. Source: MDN.

score 0 · Answer 2 · answered Nov 22 '11 at 23:44

0

#linklist {
    -moz-column-count: 3;
}

#linklist a {
    display: block;
    margin: 3px;
    padding: 4px;
}

should work, although I haven't tested it.

answered Nov 22 '11 at 23:44

Neil

50,855
8
54
69

How to split a list of links into 3 columns with CSS3?

2 Answers2

Linked