Shorthand to set the column-width and column-count.
Syntax columns: column-width column-count ;
This shorthand is equivalent to the following:
element { column-width: length; column-count: number; }
Examples:
h1 { columns: 100px 4; }
.emw3class { columns: 5em 2; }
#emw3id { columns: 5cm 3; }
Try it:
When text is displayed in newspaper columns the length of each line is much shorter. This is a great aid to readability. On the internet many people will skim read large blocks of text and this can have the unfortunate effect that they miss important points buried in a long paragraph. |
(CSS 3) Browser Support: IE 10, Opera. Use the equivalent -moz-columns for Firefox and -webkit-columns for Safari and Chrome.
“Consider the momentous event in architecture when the wall parted and the column became” ~ Louis Kahn
Related:
columns - MDN Web Docs.
column-width - Width of the columns.
column-count - Number of columns an element should be divided into.