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:

  • 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:

  • 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 πŸ˜‰


.nice-columns { column-count: 2; column-gap: 10px; /* extra styles */ padding: 20px; border: solid 1px #CCC; border-radius: 5px; box-shadow: 5px 5px 5px #888; }

Supported Browsers

Not great!

Leave a Reply

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