CSS3 MULTI-COLUMN LAYOUTS

Creating Multi-Column Layouts

The CSS3 has introduced the multi-column layout module for creating multiple column layouts in an easy and efficient way. Now you can create layouts like you see in magazines and newspapers without using the floating boxes. Here is a simple example of splitting some text into three columns using the CSS3 multiple column layout feature.

EXAMPLE

1.	p {
2.	    -webkit-column-count: 3; /* Chrome, Safari, Opera */
3.	       -moz-column-count: 3; /* Firefox */
4.	            column-count: 3; /* Standard syntax */
5.	}

Setting Column Count or Width

The CSS properties column-count and column-width control whether and how many columns will appear. The column-count property sets the number of columns inside the multicol element, whereas the column-width property sets the desired width of the columns.

EXAMPLE

1.	p {
2.	    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
3.	       -moz-column-width: 150px; /* Firefox */
4.	            column-width: 150px; /* Standard syntax */
5.	}

Setting Column Gap

You can control the gap between columns using the column-gap property. The same gap is applied between each column. The default gap is normal which is equivalent to 1em.

EXAMPLE

•	p {
•	    /* Chrome, Safari, Opera */
•	    -webkit-column-count: 3;
•	    -webkit-column-gap: 100px;
•	    /* Firefox */
•	    -moz-column-count: 3;
•	    -moz-column-gap: 100px;
•	    /* Standard syntax */
•	    column-count: 3;
•	    column-gap: 100px;
•	}

Setting Column Rules

You can also add a line between the columns i.e. the rule using the column-rule property. It is a shorthand property for setting width, style, and color of the rule in a single declaration. The column-rule property takes the same values as border and outline.

EXAMPLE

•	p {
•	    /* Chrome, Safari, Opera */
•	    -webkit-column-count: 3;
•	    -webkit-column-gap: 100px;
•	    -webkit-column-rule: 2px solid red;
•	    /* Firefox */
•	    -moz-column-count: 3;
•	    -moz-column-gap: 100px;
•	    -moz-column-rule: 2px solid red;
•	    /* Standard syntax */
•	    column-count: 3;
•	    column-gap: 100px;
•	    column-rule: 2px solid red;
•	}

CSS3 Multiple Columns Properties

The following table provides a brief overview of all the multiple columns properties:

PropertyDescription
column-countSpecifies the number of columns inside a multi-column element.
column-fillSpecifies how content is spread across columns.
column-gapSpecifies the gap between the columns.
column-ruleSpecifies a straight line or rule, to be drawn between each column.
column-rule-colorSpecifies the color of the rule between columns.
column-rule-styleSpecifies the style of the rule between columns.
column-rule-widthSpecifies the width of the rule between columns.
column-spanSpecifies how many columns an element spans across.
column-widthSpecifies the optimal width of the columns.
columnsA shorthand property for setting both the column-width and the column-count properties at the same time.
Categories: CSS