Tags

At least once a year I’m given a design mock that contains a list that has been split into columns. I’ve always wondered if it’s possible to do it using the CSS3 column layout module and it turns out that it’s easy! Just use the column-count CSS property on the <ul> to specify how many columns you want and the browser does it all for you:

  1. <ul style=”column-count: 5;”>
  2.  <li>item 1</li>
  3.  ..
  4.  <li>item 100</li>
  5. </ul>

If you’re more worried about the width of the columns, you can specify a minimum column-width instead and the browser will work out how many columns it should display:

  1. <ul style=”column-width: 250px;”>
  2.  <li>item 1</li>
  3.  ..
  4.  <li>item 100</li>
  5. </ul>

 

Example : http://helephant.com/wp-content/uploads/2013/03/css3-columns.html

Advertisements