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.
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.
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
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-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-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-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-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-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.
