CSS column-fill Property

CSS column-fill property specifies how to fill the columns of a HTML Element, balanced or auto.

The syntax to specify a value for column-fill property is

</>
Copy
column-fill: Value;

The following table gives the possible values that could be given to column-fill property.

ValueDescriptionExamples
balanceTries to fill each column with about same amount of content.
[Default Value]		column-fill: balance;
autoFills each column to the reach the height of parent. Does not guarantee that it fills all the columns.column-fill: auto;
initialSets column-fill to default value.column-fill: initial;
inheritInherits column-fill value from its parent element.column-fill: inherit;

Examples

In the following examples, we set the filling mechanism for columns of the HTML Element, using column-fill property, with different possible values.

column-fill: balance;

In the following example, we set the filling to happen balanced.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            height: 100px;
            column-count: 3;
            column-fill: balance;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns.</p>
</body>
</html>

column-fill: auto;

In the following example, we set the filling to happen automatically, where each column is filled to its maximum allowed height, and then moved to the next column to fill the content.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            height: 100px;
            column-count: 3;
            column-fill: auto;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns. This is a paragraph with text to appear in 3 columns.</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about column-fill property, and how to use this property for HTML Elements, with examples.