Columns

CSS3 introduces the multicolumn layout module: It lets you divide a single element (like a div full of text) into a three, four, or more columns. It provides CSS properties to determine the number of columns, the space between columns, and to add a line (a rule) between the columns.

Imagine reading a newspaper and having the body copy extend across the entire page width. It would be easy to lose the line you were on, wouldn’t it? There is a reason newspapers break text into columns of text—it’s easier to read! Web pages are the same; a paragraph of text that stretches margin to margin of the full width of a browser window is harder to read than one that is confined to a narrower area.

With CSS3 columns, the browser determines when to end one column and begin the next without requiring any extra markup. You retain the flexibility to change the number of columns as well as their width, without having to go back in and alter the page’s markup.

column-count

The column-count property specifies the number of columns desired, and the maximum number of columns allowed. The default value of auto means that the element has one column. Our leftmost articles are broken into three columns, and the article below the ad blocks has two columns:

snippet

#primary article .content { 
	-webkit-column-count: 3; 
	-moz-column-count: 3; 
	column-count: 3; 
} 
 
#tertiary article .content { 
	-webkit-column-count: 2; 
	-moz-column-count: 2; 
	column-count: 2; 
}

The columns will have a small gap between them. The total width of the columns combined with the gaps will take up 100% of the width of the element.

column-gap

The column-gap property specifies the width of the space between columns:

snippet

#primary article .content, 
#tertiary article .content { 
	-webkit-column-gap: 10px; 
	-moz-column-gap: 10px; 
	column-gap: 10px; 
}

Width should be mentioned in length units, such as ems or pixels, or normal.It’s up to the browser to determine what normal means, but the spec suggests 1em. Our column gaps is given as 10px wide.

column-width

The column-width property is to set min-width for your columns. The browser will include as many columns of at least the given width as it can to fill up the element—up to the value of the column-count property.

For example, if we have a parent that is 400 pixels wide, a 10-pixel column gap, and the column-width is declared as 150px, the browser can fit two columns:

(400px width – 10px column gap) ÷ 150px width = 2.6

The browser rounds down to two columns, making columns that are as large as possible in the allotted space; in this case that’s 195px for each column—the total width minus the gap, divided by the number of columns. Even if the column-count were set to 3, there would still only be two columns, as there’s not enough space to include three columns of the specified width. So the column-count property specifies the maximum column count.

If the parent element itself is too narrow for a single column of the specified width, the columns will be narrower than the column-width. So you’ll have one column that fills the whole parent element.

snippet

#primary article .content, 
#tertiary article .content { 
	-webkit-column-width: 9em; 
	-moz-column-width: 9em; 
	column-width: 9em; 
}

If you increase the font size in your browser, the number of columns will be decreased as required to maintain a minimum width. This ensures readability.

Note:

Note

Declare your column-width in ems, to ensure a minimum number of characters for each line in a column.

columns

The columns shorthand property is a composite of the column-width and column-count properties.

snippet

#primary article .content { 
	-webkit-columns: 3 9em; 
	-moz-column-count: 3; 
	-moz-column-width: 9em; 
	column-count: 3; 
	column-width: 9em; 
	columns: 3 9em; 
}

column-fill

When the height property is set on a multicolumn block, each column will be only to that height and no further before a new column is added. The browser starts with the first column and creates as many columns as necessary, creating only the first column if there is minimal text. Finally, if too little space is allocated, the content will overflow from the box—or be clipped if overflow: hidden; is set.

To declare a height on your element, but would also like the content to be spread across your columns, you can use the column-fill property. The browser will balance the height of the columns as though there were no height declared.

column-rule

Column rules are essentially borders between each column. The

snippet

column-rule

property specifies the color, style, and width of the column rules. The rule will appear in the middle of the column gap.

This property is actually shorthand for the column-rule-color, column-rule-style, and column-rule-width properties.

The syntax for the value is exactly the same as for border and the related border-width, border-style, and border-color properties. The width can be any length unit, just like border-width, including the key terms of medium, thick, and thin. And the color can be any supported color value.

snippet

-webkit-column-rule: 1px solid #CCCCCC; 
-moz-column-rule: 1px solid #CCCCCC; 
column-rule: 1px solid #CCCCCC;

column-break

There are three column-breaking properties to define where column breaks should appear. The break-before, break-after, and break-inside properties take a limited number of key terms as values to define whether a column break can and should occur before, after, or inside an element, respectively. Rather than being applied to the same element on which we defined our primary column properties, they’re applied to other elements nested inside it.

The values available are the same as for page-break-after, page-break-before, and page-break-inside in CSS 2.1: auto, always, avoid, left, and right.

CSS3 also adds a few new possible values for these properties: page, column, avoid-page, and avoid-column. The page and column values function like always, and will force a break. The difference is that page will only force page breaks and column applies only to columns. This gives you a bit more flexibility in how you manage breaks. avoid-page and avoid-column are similar, except that they function like avoid.

For example, you might want to avoid a column break occurring immediately after an h2 element in your content.

snippet

.columns { 
	column-count: 3; 
	column-gap: 5px; 
} 
.columns h2 { 
	break-after: avoid; 
}

Example

snippet

-webkit-column-break-after: always; 
-webkit-column-break-before: auto; 
-webkit-column-break-inside: never;

column-span

The column-span property will make an element to span across several columns. If column-span: all; is set on an element, all content that comes before that element in the markup should be in columns above that element. All content in columns appearing in the markup after the element should be in columns below the spanned element.

-webkit-column-span

The columns may look ulgy when text with text-align: justify; is set in very narrow columns as the left and right edges stay justified. You can use a JavaScript library called Hyphenator16 to hyphenate words and keep our text looking tidy.