mozilla
Your Search Results

    column-fill Redirect 1

    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.

    • Initial value balance
    • Applies to multicol elements
    • Inherited no
    • Media visual, but, in continuous media, has no effect in overflow columns
    • Computed value as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: auto | balance
    
    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
    CSS Multi-column Layout Module Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support ? 13.0 (13.0)-moz ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? 13.0 (13.0)-moz ? ? ?

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar