How do you use the CSS3 property of columns?

Answer 1

At a minimum, to use the CSS3 property of columns, all you need to declare is column-count. However, if you want more control over the layout of columns, you'll also want to look into using column-width, column-gap, and column rule. Column-count is how you tell the browser how many columns you want the content to display across. Column-width is how wide you want each column to be, column-gap is how big of a gap you want between each column, and column-rule determines what type of divider you want between each column. Let's say we want our content to be split across three columns with each column being 125 pixels wide, a gap of 25 pixels between each column, and a 1px black divider between each column. To accomplish this currently, you have to use browser specific prefixes like -moz- and -webkit-. Your CSS would look like:

.content {

-moz-column-count: 3;

-moz-column-width: 125px;

-moz-column-gap: 25px;

-moz-column-rule: 1px solid #000000;

-webkit-column-count: 3;

-webkit-column-width: 125px;

-webkit-column-gap: 25px;

-webkit-column-rule: 1px solid #000000;

column-count: 3;

column-width: 125px;

column-gap: 25px;

column-rule: 1px solid #000000;

}