Columns layout

Divide a block of text into columns as seen in newspapers.

Basic usage

Use .columns() class providing in brackets arguments for columns. Non of those arguments are required, but unless you provide one, columns layout won't work. Available arguments:

• integer - declare a column-count. Unless declared, their width will equal to division of the block's width minus column-gaps and declared integer.Default value is "auto" which means that width of columns will be determinedby column-width value.
• width - declare every column width in px, em and % (of containing block).Default value is "auto" - column width will be equal to division of the block's width and declared column-count

Usage of supporting classes

You can declare the gaps between columns by .column-gap() class that takes width type argument. Default value is "normal" and equals to 1em.

Declare a vertical rule between columns using .column-rule(). It's the same type of declaration as in borders, that is width, style and colour. By default there is no rule.

Browsers support: IE10+, Fx, Chrome, Safari, Opera, Opera Mobile, Android Browser

Notable lack of support: IE9-, Opera Mini

Example

1. .column(2, 20px) // Two columns with 20px width.
2. .column(5) // Five columns layout.
3. element { .column(100px); // A 100px width columns .column-gap(10px); // with 10px gap between .column-rule(1px solid black); // and 1px thick, solid, black vertical rule. }

---

Code

.columns (@arguments) {
	-webkit-columns: @arguments;
	-moz-columns: @arguments;
	columns: @arguments;
	}
.column-gap (@arguments) {
	-webkit-column-gap: @arguments;
	-moz-column-gap: @arguments;
	column-gap: @arguments;
	}
.columns-gap (@arguments) {.column-gap(@arguments);}
.column-rule (@arguments) {
	-webkit-column-rule: @arguments;
	-moz-column-rule: @arguments;
	column-rule: @arguments;
	}
.columns-rule (@arguments) {.column-rule(@arguments);}
.column-fill (@arguments) {
	-webkit-column-fill: @arguments;
	-moz-column-fill: @arguments;
	column-fill: @arguments;
}
.columns-fill (@arguments) {.column-fill(@arguments);}