CSS Multiple Columns

The CSS multi-column layout allows easy definition of multiple columns of text - just like in newspapers.

column-count

The column-count property specifies the number of columns an element should be divided into.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

column-gap

The column-gap property specifies the gap between the columns.

Example

div {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}