column-fill

  • Revision slug: CSS/column-fill
  • Revision title: column-fill
  • Revision id: 356595
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment highlight ...etc.

Revision Content

{{CSSRef}}

Summary

The column-fill CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs.

  • {{Xref_cssinitial}} {{cssinitial("column-fill")}}
  • Applies to all multi-column elements
  • {{Xref_cssinherited}} no
  • Media {{Xref_cssvisual}}
  • {{Xref_csscomputed}} as specifed

Syntax

Formal syntax: {{csssyntax("column-fill")}}
column-fill: auto
column-fill: balance

column-fill: inherit

Values

auto
Is a keyword indicating that columns are filled sequentially.
balance
Is a keyword indicating that content is equally divided between columns.

Examples

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}

Specifications

Specification Status Comment
{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}} {{Spec2('CSS3 Multicol')}}  

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatUnknown}} {{CompatGeckoDesktop("13.0")}}{{property_prefix('-moz')}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatGeckoMobile("13.0")}}{{property_prefix('-moz')}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

  • {{CSS_Reference:Columns}}

Revision Source

<div>{{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>column-fill</code> CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using <code>auto</code>, just take up the room the content needs.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}}</dfn> {{cssinitial("column-fill")}}</li>
  <li><dfn>Applies to</dfn> all multi-column elements</li>
  <li><dfn>{{Xref_cssinherited}}</dfn> no</li>
  <li><dfn>Media</dfn> {{Xref_cssvisual}}</li>
  <li><dfn>{{Xref_csscomputed}}</dfn> as specifed</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("column-fill")}}
</pre>
<pre>
column-fill: auto
column-fill: balance

column-fill: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt><code>auto</code></dt>
  <dd>Is a keyword indicating that columns are filled sequentially.</dd>
  <dt><code>balance</code></dt>
  <dd>Is a keyword indicating that content is equally divided between columns.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush:css">
.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}}</td>
      <td>{{Spec2('CSS3 Multicol')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop("13.0")}}{{property_prefix('-moz')}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("13.0")}}{{property_prefix('-moz')}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{CSS_Reference:Columns}}</li>
</ul>
Revert to this revision