Column-fill: balance Example 26

Actual (live) results in your browser:

Following his own account, Lunardi's first act on finding

Multi-column element uses the code div { border: #979797 solid 2px; column-fill: balance; /* Balance content equally between columns */ columns: 4; column-gap: 2.5em; column-rule: black solid thick; font-family: "Liberation Sans", ArialMT, Arial, sans-serif; font-size: 18px; height: auto; line-height: 1.14; orphans: 1; /* "The orphans property specifies the minimum number of line boxes of a block container that must be left in a fragment _before_ a break. */ padding: 1em; widows: 1; /* "The widows property specifies the minimum number of line boxes of a block container that must be left in a fragment _after_ a break. */ width: 42.7em; }

Expected results:

Four columns, the first three have content.