column-count

The column-count property controls the number of columns that the content of an element will be split into.

You can specify a single positive integer representing the number of columns.

Instead of a number, the keyword auto is allowed. Then the number of columns will depend on the width specified in the column-width. You can also specify any of the keywords.

3 columns:

        
          
          p {  column-count: 3;}
          p {
  column-count: 3;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Let the browser decide by itself, knowing the column width:

        
          
          p {  column-count: auto;  column-width: 250px;}
          p {
  column-count: auto;
  column-width: 250px;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If you specify only column-count, the browser thinks: "I will split this content into that many columns at all costs."

If you specify both column-count and column-width, for example column-count: 4; and column-width: 250px;, then the browser thinks:

• If the element can fit 4 columns of 250 px, I will display exactly 4 columns, even if they will be wider than 250 px.
• Otherwise, I will display as many columns as possible, but each with a width of at least 250 px.
• If the total width of the element is less than 250 px, I will show the content in one column across the entire width.

In the example below, you can change the number of columns for the given text. If you choose the auto option, the width of one column will be 160px.

If you specify both column-width and column-count, the browser will display as many columns as can fit in the width of the parent block. In the example below, we can control the size of the block using a slider. The border will help us visualize its sizes. Let's set a fixed number of columns and the width of the column for the text block:

        
          
          p {  column-count: 4;  column-width: 250px;}
          p {
  column-count: 4;
  column-width: 250px;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

By moving the slider, you can see how the browser reduces the number of columns when necessary.

The number of columns within the element, in addition to the width of the column itself, is also influenced by the column-gap property.

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

Content breakdown into columns is one of the main principles of printing layout. There are a number of studies proving that it is most convenient to perceive information if the line width is from 55 to 75 characters. However, in modern web design, text column breakdown is used very rarely, and is most often employed for styling under newspaper layout or for designing artistic materials.

Multicolumn layout can be used to build relatively complex graphic compositions, such as Masonry Layout. A popular representative of this visual style is Pinterest.

+ Open