How to use Columns Property in CSS?

This property is used to define columns.

  • column-count
  • column-width
  • columns

column-count

This property is used to specify the number of columns an element should be divided into. We can set this property to number or auto (default).

Ex:-

div { column-count: 2;}

column-width

This property is used to specify width for the columns. We can set this property to length or auto (default).

Ex:-

div { column-count: 2; column-width: 100px; } div { column-width: 200px; }

columns

This is shorthand which is used to set column-width and column-count.

Syntax: –

Selector { columns: column-width column-count;}

Ex:-

div { columns: 200px 2;}

Tagged : / / / /