HTML DOM Style columnFill Property

Last Updated : 23 Feb, 2024

The HTML DOM Style columnFill property determines how content is distributed into columns in a multi-column layout. Values like auto or balance control whether columns are filled sequentially or balanced in height.

HTML DOM Style columnFill Property Syntax

To get the columnFill property

object.style.columnFill

To set the columnFill property

object.style.columnFill= "balance|initial|auto|inherit"

HTML DOM Style columnFill Property Values

balance: it balances columns(Default).
auto: Columns will have different lengths & filled sequentially.
initial: sets the value to default.
inherit: Inherit value from parent.

HTML DOM Style columnFill Property Example:

In this example, we use the HTML DOM Style columnFill property to adjust content distribution in multi-column layouts. JavaScript triggers set the property to “balance” or “auto”.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML | DOM Style columnFill Property</title>
    <style>
        #container {
            column-count: 3;
            column-gap: 20px;
            height: auto;
            column-fill: auto;
            padding-top: 20px;
        }
 
        .root {
            width: 90%;
            padding: 10px;
        }
 
        button {
            padding: 10px 20px;
            background-color: #0056b3;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
 
        button:hover {
            background-color: skyblue;
        }
    </style>
</head>
 
<body>
    <div class="root">
        <h1>HTML DOM Style columnFill Property</h1>
        <div class="mybtn">
            <button onclick="setColumnFill('balance')">Set to Balance</button>
            <button onclick="setColumnFill('auto')">Set to Auto</button>
        </div>
        <div id="container">
            <p>
                HTML stands for HyperText Markup Language.
                It is used to design web pages using a markup language.
                HTML is a combination of Hypertext and Markup language.
                Hypertext defines the link between web pages.
                A markup language is used to define the text document
                within the tag which defines the structure of web pages.
                This language is used to annotate (make notes for the computer)
                text so that a machine can understand it and manipulate text accordingly.
            </p>
        </div>
 
    </div>
 
    <script>
        function setColumnFill(fillMode) {
            document.getElementById("container").style.columnFill = fillMode;
        }
    </script>
</body>
 
</html>

Output:

HTML |DOM Style columnFill Property Example Ourput

HTML DOM Style columnFill Property Example Explanation

In the above example HTML DOM Style columnFill controls content distribution in multi-column layouts.
JavaScript functions dynamically set columnFill to “balance” or “auto”.
Adjustment of columnFill enhances visual consistency in multi-column designs.
JavaScript triggers ensure real-time modification of column distribution, improving layout adaptability.
Visual Consistency: Ensures balanced layout, reducing height discrepancies between columns.

Note: The CCSS3 column-fill Property is supported in “13.0 -moz-“.

HTML DOM Style columnFill Property Supported Browsers:

Suggest improvement

HTML | DOM Style columns Property

Share your thoughts in the comments