How to CSS3 Multi Columns

Today i’m going to show you How to create a Multi Columns text with CSS3.

We will use this styles:

  • -webkit-column-count
  • -webkit-column-gap
  • -moz-column-count
  • -moz-column-gap
  • column-count
  • column-gap

With this styles you can set how many columns and how much space you want between them.

You could also you one extra style:

  • -webkit-column-rule: 1px solid black;
  • -moz-column-rule: 1px solid black;
  • column-rule: 1px solid black;

It creates a vertical line between the columns.

This multi columns styles are awesome. Time ago we build multi columns using PHP and some kind of word counting.
Now you can style multiple columns in a few seconds 😉

Code

Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Supported Browsers

Mozill Firefox and Safari 3.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*