column-fill

The property column-fill defines how to fill columns of an element.

Syntax

column-fill: balance | auto;

Example

.mydiv {
     column-count: 3;
     column-fill: balance;
     height: 100px;
     border: 1px solid black;
}
        
.div2 {
      column-count: 3;
      column-fill: auto;
      height: 100px;
      border: 1px solid black;
}

Property Values

balance: fills each column with the same amount of content, but avoids the columns to grow taller than the height.

auto: fills each column until it reaches the height and until it runs out of content.