Column fill property (column-fill)

The column-fill property controls how content is spread across columns if height is greater than auto.

Syntax:

selector {

column-fill: balance | auto | initial | inherit;

}

Values:

balance; Balances the columns out in seemingly even way. This is the default value.
auto; Columns should get filled as they are being laid out, and probably will be uneven.
initial, inherit

The column-fill property gives us two main values for setting how the amount of the content is balanced over the columns.

If it’s set to balance then the variation in the column length will be minimized and all lengths will be as equal as possible.

If it’s set to auto then the columns will be filled in sequential order and (for instance) may result in the 4th of 4 columns having less content than the 3 previous columns. If the value is set to balance then it would allow all 4 columns to be roughly of equal height. This property solves the problem of undesirable gaps being left in the content.

Other two possible values, initial and inherit are self-explanatory. More about them learn in CSS2 tutorial.

Example

The example using column-fill property:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    font-family:Arial; font-size:smaller; color:#444; 
    background-color:#fff;
  }
.column
 {
     column-fill: auto;
        -moz-column-fill: auto; /* Firefox */
        -webkit-column-fill: auto; /* Chrome, Safari, Opera */
    column-count: 3;
   	    -webkit-column-count: 3; /* Chrome, Safari, Opera */
   	    -moz-column-count: 3; /* Firefox */
} 
</style>
</head>
<body>

<h3>Text divided into 3 columns with fill value set to auto</h3>
<div class ="column">
The value number is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns. The value auto is a default value for column-count property and, if used, it indicates that the number of columns should be determined by other CSS properties, like column-width. Other two possible values, initial and inherit are self-explanatory. More about them learn in CSS2 tutorial.
</div>
  
</body>
</html>

›› go to examples ››

Column fill property (column-fill)

Syntax:

Values:

Example

The example using column-fill property:

Comments

About

Contact

Get Connected