A CSS Multi-column Layout Tutorial for Beginners

Reading very long lines of text can be problematic for some people. They will have to focus more on not missing a line instead of the text itself. This problem is easily solved by using multiple columns to lay out the content. Multiple columns are ubiquitous in print media. The CSS Multi-column Layout Module features enable us to recreate the same kind of multi-column effect on websites.

One thing that makes it hard to use multiple columns when designing web pages is the inability to control the size of documents. In this tutorial, I will teach you how to create responsive multi-column layouts that look good on a variety of screen sizes. We will begin with the basics and then move on to more complex concepts.

[author_more]

Browser Support

Browser support for multi-column layout is great if you are willing to use prefixes. This feature is supported by 95.32% browsers worldwide based on stats from Can I use. A few browsers like IE10+, Edge, and Opera Mini fully support multi-column layouts. Others like Firefox and Chrome need prefixes.

There is an older polyfill available that you try if you require support for older browsers (usually this means IE9 and below). Of course, if a browser does not support multi-column features, the layout degrades gracefully to a single column layout. So a polyfill in this case might not be the best option.

The CSS multi-column layout module has a number of different properties. In the following sections I will go over all of them one by one.

Column Count and Column Width

The column-count property specifies the number of columns you want to set for an element. You can set it to auto or a positive number. When set to auto, the number of columns will be determined by the column-width property. If set to a positive number, all the columns are set to an equal width.

The column-width property specifies the width of individual columns of an element. This is not to be followed strictly. For instance, columns can be narrower if there is not enough space available. This property too can be set to both an auto value or a positive number. If set to auto, the width will be determined by the column-count property. Available space will be divided among all columns equally.

Alternatively, these two values can be set simultaneously using the shorthand columns property. The syntax for columns property would be:

[code language="css"]
.example {
columns: <'column-width'> || <'column-count'>
}
[/code]

A few examples of this property in use are shown below with the interpretation in the comment beside each example:

[code language="css"]
.example {
columns: 10em; /* column-width: 10em / column-count: auto */
columns: 4; /* column-width: auto / column-count: 4 */
columns: 4 auto; /* column-width: auto / column-count: 4 */
columns: auto 10em; /* column-count: auto / column-width: 4 */
columns: auto; /* column-count: auto / column-width: auto */
columns: auto auto; /* column-count: auto / column-width: auto */
}
[/code]

As you can see, the first columns definition is a shorthand for what you see in the fourth, and second one is shorthand for the third. Basically, if the integer does not have any unit assigned it is parsed as column-count.

Here is a CodePen demo to demonstrate the features discussed so far

If you resize the window, you will notice a few things:

• The column-count property always keeps the number of columns equal to the value you specify. The only thing that changes is the width of the columns.
• The column-width property automatically changes the number of columns based on available space. The number of columns is adjusted in such a way that column width is greater than the specified value. It may also adjust the width of all columns to a smaller value if there is not enough space available.
• The columns property uses the column-count value as the limit for maximum columns allowed. It keeps adjusting the width in such a way that column-count never exceeds the count limit and column-width is also in close proximity to the specified width.

Continue reading %A CSS Multi-column Layout Tutorial for Beginners%

by Baljeet Rathi via SitePoint