CSS Property column-fill








The column-fill property controls how to fill columns, balanced or not.

When you add height to a multi-column element, you can control how the content fills the columns.

The content can be balanced or filled sequentially.

For example, 

ul {
  height: 300px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -moz-column-fill: balance;
       column-fill: balance;
}




Summary

Initial value
balance
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.columnFill="auto"
Animatable
no.

CSS Syntax

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

Property Values

balance
Default value. Columns are balanced.
auto
Columns are filled sequentially. Each column could have different lengths.
initial
sets to default value
inherit
Inherits this property from its parent element

Browser compatibility

column-fill Yes 10.0 13.0 -moz- Yes 11.0

Example

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {<!--from  ww w.j av  a 2s .  c  om-->
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit augue duis 
dolore te feugait nulla facilisi. Nam liber tempor cum 
soluta nobis eleifend option congue nihil imperdiet 
doming id quod mazim placerat facer possim assum. Typi 
non habent claritatem insitam; est usus legentis in iis 
qui facit eorum claritatem. Investigationes demonstraverunt 
lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

Click to view the demo





Example 2

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
.example {<!--from ww  w  .  ja va 2  s  .  com-->
  -webkit-columns: 4;
  -moz-columns: 4;
  columns: 4;
  height: 105px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 0.5em;
}

.example-balance {
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  margin-bottom: 1em;
}

.example-auto {
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

code {
  font-family: "Courier New", monospace;
}
</style>
</head>
<body>

<code>column-fill: balance;</code>

<div class="example example-balance">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus libero libero, placerat at hendrerit nec, vulputate consectetur nisi. Morbi scelerisque lectus id sapien laoreet accumsan. Nunc eget tincidunt ligula, eget suscipit tellus. Sed iaculis nibh gravida faucibus porta. Sed lacinia tristique elementum. Etiam odio sem, dapibus eu tempus vel, consequat non turpis.</p>

</div>

<code>column-fill: auto;</code>
<div class="example example-auto">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus libero libero, placerat at hendrerit nec, vulputate consectetur nisi. Morbi scelerisque lectus id sapien laoreet accumsan. Nunc eget tincidunt ligula, eget suscipit tellus. Sed iaculis nibh gravida faucibus porta. Sed lacinia tristique elementum. Etiam odio sem, dapibus eu tempus vel, consequat non turpis.</p>
</div>

</body></html>

Click to view the demo