Open In App
Related Articles

HTML DOM Style columnFill Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

ColumnFillPropertyEx

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:



Last Updated : 23 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads