The column-count CSS3 property describes the number of columns an element may be divided into. This property goes very well with the paragraphs written for an online journal or magazine.

Syntax:

selector { 

         column-count: number | auto | initial | inherit;

}

Values:

  • number; Represents the  number of columns, the element's content should be split into
  • auto; Deafult value, that allows other properties (or browser) to determine the number of column.
  • initialinherit

The value number is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

The value auto is a default value for column-count property and, if used, it indicates that the number of columns should be determined by other CSS properties, like column-width.

Other two possible values, initial and inherit are self-explanatory. More about them learn in CSS2 tutorial.

Example

The column-count property example in CSS3:

 

›› go to examples ››