CSS Reference Property

column-count

The column-count property allows you to lay an element’s content in multiple columns by specifying a number of columns.

Depending on the available space, the browser will determine the width of the columns, unless you specify an exact width using the column-width property.

Setting both column-count and column-width does not always make much sense, as it may restrict the flexibility and responsiveness of the layout, such as if you use absolute widths for the columns instead of percentage widths.

Specifying the number of columns is simple. For example, the following sets the number of columns to 3 on the page.

body {
    column-count: 3;
}
                

Laying content, like text and images, in multiple columns is usually done in print magazine layouts, and using this property, along with others, you can create a similar effect on the web.

Official Syntax

  • Syntax:

    column-count: <integer> | auto
  • Initial: auto
  • Applies To: non-replaced block-level elements (except table elements), table cells, and inline-block elements
  • Animatable: yes, as a integer

Values

auto
Means that the number of columns will be determined by other properties (e.g., column-width, if it has value other than auto).
<integer>
Describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both column-width and column-count have non-auto values, the integer value describes the maximum number of columns.

Examples

The following example specifies the number of columns on an element with a class name mag. Then, using media queries, the number of columns is changed on small screens.

.mag {
  column-count: 2;
}

@media screen and (max-width: 30em) {
    .mag {
        column-count: 1;
    }
}
            

Live Demo

Play with the values of the column count to see how the text adjusts. Resize the screen to see how the width of the columns changes. Try using media queries to change the number of columns on different screen sizes.

View this demo on the Codrops Playground

Browser Support

CSS3 Multiple column layout

Method of flowing information in multiple columns

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 50
  • 52
  • 10
  • 11
  • 10

Mobile / Tablet

  • 10
  • 56
  • all
  • 61
  • 56

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:24 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.