Create Columns Easily with CSS3’s Column-Count

Published March 4, 2016 by saurav.roy.

CSS3’s column-count property makes it easy for you to turn your content into columns with only one line of CSS and no extra HTML markup.

Let’s say you have a div made up of a few paragraphs, like this:

columns1

If you want to spread that content out across three adjacent columns, you can do it manually by creating three divs and styling them to float or display inline, OR you can use CSS3’s column-count property, like this:

div{
-webkit-column-count: 3;
}

columns2

The column-count property isn’t supported by many browsers, so it should be used with the appropriate prefixes. There are also other properties associated with column-count to help you customize your columns, including column-gap and column-rule. Column-gap will add space in between your columns:

div{
-webkit-column-gap: 50px;
}

columns3
Column-rule adds a rule in between your columns to separate them:

div{
-webkit-column-rule: 2px outset #000;
}

columns4

CSS3’s column-count property is easy to use and versatile, making it the best option for creating columns using CSS and HTML.