Multi-Column Layout

Multi-column layouts produced using CSS multi-column properties behave differently from float-based ones. More specifically, they behave more typically, in that the columns resize and text wraps accordingly as the browser window is resized. Multi-column layouts are invaluable in content design because they help achieve various goals. The primary one is to vertically divide the content on a wide screen into smaller chunks, so that the text is easier to read, since text lines that are too long can make reading difficult. As well as making the text easier to be read, columns improve the look and feel of the content presentation, because they increase the amount of white space in a presentation. The amount of space between columns, known as gutter, also plays a role in this. Columns can also be used to separate topics. For example, main text can be separated from excerpts or a list of links. You should know too that columns that are too narrow can make the text difficult to be read. Table 12.2 lists the CSS properties used to create and style columns. They are all non-inherited.

1. columns and column-span

Figures 12.35 and 12.36 show how the columns and column-span properties are used and the result.

In the example, the div{} rule specifies to create three 100px columns. The .articlel {} rule says to make the <h2> element of class=“ article 1” span only the first column (i.e., the default) and the .article2{} rule says to make the <h2> element of class=“article2” span all the three columns. Note that even with the use of vendor prefixes, as of time of writing, Firefox does not support the column-span property and span is always one column.

2. column-count, column-rule, and column-gap

Figures 12.37 and 12.38 show how the column-count, column-gap, and column-rule properties are used and the result. The properties have the effects described earlier in Table 12.2. The rule specifies to three columns, with 25px gutters between them as well as blue lines.

3. column-fill

As of time of writing, the column-fill property is only supported by Firefox and the -moz- prefix must be used for it to recognize it. Figure 12.39 shows how it is used and Figure 12.40 the result. The div{} rule specifies the number of columns and the rule. The articlel {} and article2{} rules specify different values for the column-fill property. Notice that the div{} rule only takes effect when the value for column-fill is balance.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *