Columns

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.


Copyright © 2013-2022 Emw3.com
Some rights reserved