Split content into columns

CSS 3 has the ability to split content into multiple columns. IE supports this feature from version 10.

1st method: the specified number of columns

You can divide the content by the specified number of columns through the column-count property.

.columns {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #CCC;
}

Example on JSFiddle

The column-gap parameter defines the distance between the columns.

2nd way: automatic number of columns

If you specify the column-width parameter (without specifying the number of columns through the column-count parameter), the content is automatically divided into several columns with the specified width.

.columns {
    column-width: 200px;
    column-gap: 20px;
}

Example on JSFiddle

As an example of dividing content into columns, you can see any note on Wikipedia: en.wikipedia.org/wiki/World_Wide_Web#References