CSS columns property


It is a shorthand property of column-width and column-count. It defines the number of columns as well as the width of columns.


columns : column-width   column-count

Property values



In this case, the width of columns is determined by the number of columns.

column-width: auto;

+ve length

length determines the width of a column in a block. The total width of the box is 300px.

100px represents the width of a column. Three columns are covering the the full width of 300px.

column-width: 100px;



In this case, the number of columns depend upon the column-width.

column-count: auto;

+ve integer

integer value determines the number of columns in a block. 4 means four columns in a block.

column-count: 4;

Applicable to

It applies to multi-column container.

#CSS digger
Was this article helpful?

column count represents the number of columns and distributes the content among those columns