Layout with CSS3 columns

A distinctive feature of the print design is the widespread use of column layout. And there are good reasons for this.

First, the eye perceives better lines of text consisting of 8 to 12 words. Secondly, you can much better organize the columns and reduce the amount of empty space on the page. For a long time this was an exceptional advantage of printing. On the Web, you had to pervert in every way. But now CSS3 allows you to create column layouts without using JavaScript.

Column model

The W3C specifications define several new properties that allow columns to be specified in an HTML layout. Now, as in the printing industry, you can set the width of columns, their number and even some rules of behavior.

Essential in the specification is that the column element must have explicitly indicated the number of columns and / or the width of the columns. Browsers should display the column elements in a manner similar to the display of tables, but the content will be distributed to the columns dynamically.
')
At the moment, it is not possible to determine the properties of individual columns (for example, the color of a single column). Let's hope that after all the current properties proposed for the implementation are implemented, the column management properties will also appear.

Number and width of columns

To create a column element, you must set the column-count and / or column-width properties.

column-count

By default, column-count is auto . Those. if you specify column-width , the browser will independently calculate the number of columns necessary to display the multi-column element. This behavior is not always convenient, so let's set the number of columns in which the content is located.

.column
{
-webkit-column-count : 2 ;
-moz-column-count : 2 ;
}

column-width

As mentioned above, you can set the column width without specifying the number of columns, and the browser will calculate it dynamically. The width of the columns can be specified by any units of measurement available in CSS: em, px,%.

.column
{
-webkit-column-width : 15em ;
-moz-column-count : 15em ;
}

Of course, you can combine column-width and column-height :

.column
{
-webkit-column-count : 2 ;
-moz-column-count : 2 ;

-webkit-column-width : 15em ;
-moz-column-width : 15em ;
}

Intervals and rulers

If print designers are used to thinking in terms of columns and spacing, then web designers have been forced to work with borders and indents.

The column spacing is exactly what is written, the size of the empty free space between the columns specified in CSS units.

colomn-gap

The W3C specification defines the default interval value in 1em, in the example we will use it:

.column
{
-webkit-column-gap : 1em ;
-moz-column-gap : 1em ;
}

column-rule

The line also came from the printing industry. Initially, rulers are thin lines between columns that make it easier to read or separate individual stories. CSS3 provides three different ruler configuration properties: column-rule-size , column-rule-style, and column-rule-color , or you can use column-rule to specify all three properties.

As you may have guessed, all the usual units of measurement, styles and colors can be used:

.column
{
-webkit-column-rule : 1em solid # 000 ;
-moz-column-rule : 1em solid Black ;
}

Fun using

Currently, the column property family is supported by WebKit or Mozilla based browsers.

As you have already noticed, the engine modifiers are used in the code. If you do not specify a modifier, then even supporting browsers will ignore the column-xxx properties.

What will happen if the column is limited in height

The browser will add columns to fit the text.

Saves overflow : hidden .

Display ruler in one column

If the text fits in one column, Mozilla does not draw a ruler, and WebKit draws.
WebKit:

Mozilla:

Properties that are in specification but not supported

These are column-break and column-span properties.

The first is intended as a pointer to the need to start the next column. For example, before h2 tags.

.column h2
{
column-break-before : always ;
}

The second allows you to display an element through all columns, like a newspaper frame.

.column h1
{
column-span : all ;
}

Conclusion

The range of use of column properties is still very narrow. Not even because not all browsers support them (Mozilla + WebKit already provide more than half of the market), but because of the incomplete implementation of functions. Although the functionality is quite interesting and deserves attention.

---

On this topic:
W3C specification: www.w3.org/TR/css3-multicol
The article I translated, but when the number of my comments became comparable with the text, I wrote my own: www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts
A good set of examples: www.quirksmode.org/css/multicolumn.html
My example: unconnected.info/multicolumn.htm (my site is afraid of habraeffects, if it doesn’t open, uh, sorry)
Snapshot of my example: http://www.peeep.us/a1660973 (thanks to kuzvac )