CSS columns property

CSS columns

CSS columns is a short hand property, it is used to specify the width and total number of columns to be formed.

It consists of following shorthand properties

  • column-width : It is used to specify the width of the columns.
  • column-count : It is used to specify the maximum number of columns that can be formed.

To support column property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.

Example

Try Yourself

In the above example values used in column property are,

50px - column-width

34 - column-count