CSS 3 Columns (equal height text columns)

CSS 3 can create equal-height text columns, implemented through Column-count, Column-width, and Column-gap properties . The assumptions are labeled as follows:

The following rule creates a three-column layout with a width of 14em for each column and a 2em gap between the columns. One of the advantages of CSS columns is that when the available space is less than the width of the defined column, the column does not wrap around as it does with floats, but instead reduces the number of columns, so if there is not enough space to display three columns, it is reduced to two columns.

{    -moz-column-count: 3;     -moz-column-width: 14em;     -moz-column-gap: 2em;     -moz-column-rule: 1px solid #ccc;     -webkit-column-count: 3;     -webkit-column-width: 14em;     -webkit-column-gap: 2em;     -webkit-column-rule: 1px solid #ccc;}

You can see that browser support for CSS columns is not extensive, so you need to use browser-specific extensions in addition to regular code.

CSS 3 Columns (equal height text columns)