Create Columns Easily with CSS3’s Column-Count

Published March 4, 2016 by CSS Newbies.

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.

  1. Marcos (reply)

    Chrome-only articles? I like your blog, but this things makes me annoying. We will achieve a chrome-only world with this kind of articles, a very bad world, and return to the IE6 era and the browser war. Please, it’s not hard to put -moz- prefix to compatibilize, but if you don’t tell it to users they doesn’t know.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>