CSS3 Multiple-column layout

In CSS3, there are several simpler properties for text layout. With these new properties, we can simply format the text, like newspapers and magazines.

Some of the new properties, and browser support:

Property	Browser Support
Column-count	Ie	Firefox (-moz-)	Chrome (-webkit-)	Safari (-webkit-)	Opera
Column-gap	Ie	Firefox (-moz-)	Chrome (-webkit-)	Safari (-webkit-)	Opera
Column-rule	Ie	Firefox (-moz-)	Chrome (-webkit-)	Safari (-webkit-)	Opera

Note:

• In the Firefox browser, add (-moz-) the prefix.
• In the Chrome and Safari browsers, prefix (-webkit-) is added.
• For IE browsers, only IE10 and above versions are supported.

New Properties and descriptions:

Property	Description
Column-count	Defines the number of columns that an element should be delimited
Column-fill	Define how columns are filled
Column-gap	Define the spacing between columns
Column-rule	Column-rule property's Shorthand property, defining the rules between columns
Column-rule-color	Define the rule color between columns
Column-rule-style	Define a rule style between columns
Column-rule-width	Define the rule width between columns
Column-span	Defines the number of columns that an element should span
Column-width	To define the width of a column
Columns	Shorthand properties for Column-width and Column-count

With the definition of these new properties, I can make a simple layout of the text (Firefox browser)

*{
	-moz-column-count:3;
	-moz-column-gap:40px;
	-moz-column-rule:4px outset #ff0000; "
}

The CSS style above is that the text in the element is divided into 3 columns, the distance between the columns is 40px, and the columns are separated by a line with a color of #ff0000 and a width of 4px.

In the same way, we can also format the contents of some elements.

For example, we can make a list of layouts:

Part of the code is (Firefox browser):

<! DOCTYPE html>