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


selector { 

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



  • 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.
  • initialinherit

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.


The example using column-fill property:


›› go to examples ››