Explanation: These CSS declarations (columns and more) allow you to divide the web page into a multi-column layout (like text in a newspaper or magazine). Sadly, they are only  partly supported in -webkit and -moz browsers at the time of this writing. This is improving.

Some of the current properties include the following:

  • columns (a short-hand)
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-fill
  • column-span
  • break-before
  • break-inside
  • break-after

Example CSS code:

Examine the web page itself for details (view the source code). Note that there are vendor specific prefixes. One should also include the default (not done below). One can affect the number of columns, the gap between columns, whether a line appears in the gap (and the color of the line) along with controlling how columns break, span, fill, and overflow. There are many capabilities we did not previously have available.

h2 + div {
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
-moz-column-rule-style: solid;
-moz-column-rule-color: #fff;
-moz-column-rule-width: 2px;
-webkit-column-rule-style: solid;
-webkit-column-rule-color: #fff;
-webkit-column-rule-width: 2px;

Example page (view the source code): (will work in most modern browsers).


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.