column-fill

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.

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

This property is only available in Firefox. Firefox will automatically balance content in a height-constrained multi-column layout. The other browsers will always fill columns sequentially when given a height constraint.

To make Firefox behave like the other browsers, that is to fill columns sequentially, you can setcolumn-fill: auto.

Values

column-fill accepts the keyword values balance and auto.

balance will fill each column with about the same amount of content, but will not allow the columns to grow taller than the height. You might find that the columns will come up shorter than the height as the browser distributes the content evenly horizontally.

auto will fill each column until it reaches the height and do this until it runs out of content. Given the content, this value will not necessarily fill all the columns nor fill them evenly.

It’s kind of like pouring juice into glasses. You can pour an equal amount of juice into each glass and find that you don’t fill each glass to the top (balance). Alternatively, you can fill a glass to the top until it’s full and repeat this until no juice is left. As a result, the remaining glasses may have less or no juice (auto).

The example below only works in Firefox.

<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>

.example {
  -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;
}

Related Properties

• columns
• column-count
• column-gap
• column-rule
• column-span
• column-width

Browser Support

This property is only available for Firefox.

Multi-column layout support:

Don’t forget your prefixes!