CSS3 Multiple Column Layout

Creating a multiple columns layout, also known as the “newspaper layout”, has been implemented by web developers for quite some time now. However, this has often resulted in the use of flaky techniques and floats.

Using these techniques generally results in a very time-consuming process. Fortunately, CSS3 provides a multi-column layout module that offers more flexibility and control over previous techniques and methods.

Browser Support

Before you start to implement this module, you should be aware that there is limited browser support at this time. Internet Explorer 10+, as well as Firefox, Chrome, Safari, and Opera, support this module.

However, while Internet Explorer 10 and Opera provide native support, Firefox, Chrome, and Safari require their vendor prefixes at this time. Previous versions of Internet Explorer do not provide any support for this module.

Browser	Vendor Prefix
Internet Explorer 10+	`None`
Firefox	`-moz-column(s)--`
Opera	`None`
Safari	`-webkit-column(s)--`
Chrome	`-webkit-column(s)--`

Multiple Columns Properties

You should at the very least, specify the number of columns, or the width of your columns, within a multi-column element. However, there are additional properties we will cover that are part of this module.

Property	Description
`columns`	A shorthand property for setting `column-width` and `column-count`.
`column-count`	Specifies the number of columns an element should be divided into.
`column-fill`	Specifies how to fill columns.
`column-gap`	Specifies the gap between the columns.
`column-rule`	A shorthand property for setting all the `column-rule-*` properties.
`column-rule-color`	Specifies the color of the rule between columns.
`column-rule-style`	Specifies the style of the rule between columns.
`column-rule-width`	Specifies the width of the rule between columns.
`column-span`	Specifies how many columns an element should span across.
`column-width`	Specifies the width of the columns.

Creating Columns

You can use the shorthand column property to specify the number of columns and/or the width of the columns. Alternatively, you should use the column-count and column-width properties as described below.

The column property accepts one or two values. If you supply two values, one of the values should be set to auto. Auto is the default value for count and width.

Example

<!DOCTYPE html>
<html>
<head>
    <style> 
        #multi {
            -moz-columns:300px auto;
            -webkit-columns:300px auto;
            columns:300px auto;

            -moz-columns:auto 3;
            -webkit-columns:auto 3;
            columns:auto 3;

            -moz-columns:300px;
            -webkit-columns:300px;
            columns:300px;

            -moz-columns:3;
            -webkit-columns:3;
            columns:3;
        }
    </style>
</head>
<body>
    <div id="mutli">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...
    </div>
</body>
</html>

column-width Property

The column-width property does exactly what it states. It allows you to specify a fixed width for the columns. Values can be expressed using common CSS measurements such as px, em, etc.

If this property is set to auto, then the width of the columns will be dictated by other properties, such as column-count.

column-width: auto|[length];

column-count Property

If you prefer to split up the content based on the number of columns instead of by width, then use the column-count property. The content will be divided into the required number of columns.

If this property is set to auto, then the number of columns will be decided by other properties, such as column-width.

column-width: auto|[number];

column-gap Property

The column-gap property provides for the ability to add a space between each of the columns. The width of the gap is done by using standard CSS measurements. The width of the gap that you specify cannot be a negative number.

column-gap: normal|[length];

column-rule Property

The column-rule property essentially places a border down the middle of the column-gap. To use the column-rule property, the column-gap property is also used. The width must be specified and must have the same or larger value than the column-rule.

The column-rule property is a shorthand property for column-rule-color, column-rule-style, and column-rule-width.

column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width: thin|medium|thick|[length];
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
column-rule-color: color;

column-span Property

The column-span property allows you to span across all of the columns.

For example, if you have an element such as a header (h1) that you would like to span across all of the columns, you can use the column-span:all property/value and apply it to the h1 selector.

column-span: all|none;

column-fill Property

The column-fill property gives accepts two values for setting how the amount of the content is balanced over the columns. If the property is set to balance, then the variation in the column length will be minimized and all lengths will be as equal as possible.

If set to auto then the columns will be filled in order. For example, this may result in the 3rd of 3 columns having less content than the 2 previous columns. The balance property value provides for roughly equal height in each column.

column-fill: balance|auto;

Example

<!DOCTYPE html>
<html>
<head>
    <style> 
        #multi {
            line-height:1.5em; 
            -moz-columns:3;
            -webkit-columns:3;
            columns:3;

            -moz-column-gap:80px;
            -webkit-column-gap:80px;
            column-gap:80px;

            -moz-column-rule:4px solid #ababab;
            -webkit-column-rule:4px solid #ababab;
            column-rule:4px solid #AAAAAA;
        }
    </style>
</head>
<body>
    <div id="mutli">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...
    </div>
</body>
</html>