Using CSS3 to Create Multi-Column Layouts in Your Web Pages

To support the “newspaper” type layout in your web application, the W3C offers the multi-column layout in the CSS3 specification. This multi-column layout enables web developers to fit a given text in one or more columns.

Use of multi-column layout supports flexibility since content can easily flow from one column to the other, and the number of columns can vary depending on the view port.

 

Properties associated with multi-column layout

• Column-width – This specifies the width of the column.
• Column-count- This specifies the number of columns of a multicol element.
• Columns – This is a short cut to specify both column-width and column-count.
• Column-gap – This specifies the gap between columns. It cannot be negative.
• Column-rule-color – This property specifies the color of the column rule. It accepts any valid “color” value.
• Column-rule-style – This property specifies the style of the rule between columns of an element.
• Column-rule-width – This property specifies the width of the rule between columns. It cannot be negative.
• Column-rule – This is a short cut to specify column-rule-color, column-rule-style and column-rule-width properties.
• Break-before – This property specifies page/column break behavior before the generated box. The valid values are “auto”, always”, “avoid”, left” “right”, “page”, “column”, “avoid-page”, and “avoid-column”.

10.  

Break-after – This property specifies page/column break behavior after the generated box. The valid values are “auto”, “always”, “avoid”, left” “right”, “page”, “column”, “avoid-page”, and “avoid-column”.

Break-inside – This property specifies page/column break behavior inside the generated box. The valid values are “auto”, “avoid”, “avoid-page”, and “avoid-column”.

12.   Column-span – This property specifies how many columns an element spans across.  The valid values are “none” and “all”.

13.   Column-fill – This property specifies how to fill columns. Valid values are “auto” and “balance.

 

For the break behavior mentioned in bullet points #9, #10 and #11, here is the definition of what the values represent.

 

Per the CSS3 specification, multi-column layouts can be defined in various ways:

      Defining multi-column layout by specifying width

We can specify a multi-column layout by providing the “column-width”. E.g.

body {

     column-width: 10em

}

In the example above, we have specified that the column be at least 10em wide.

 

2.       Defining multi-column layout by specify number of columns

We can specify a multi-column layout by providing the number of columns to break the content into.

body {

     column-count: 3

}

 

3.       Defining “column-width” and “column-count” in one command “columns”.

body {

     columns: 3

}

We can see the many ways in which we can specify the multi-column layout.

Summary

In this article, we learned about how to use USS3 to create multi-column layouts in your web pages

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

Reference

http://www.w3.org/TR/css3-multicol/