Skip to content
Related Articles

Related Articles

HTML | DOM Style columnFill Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022

HTML DOM Style columnFill Property specifies how to fill a column(balanced or not). 

Syntax:

  • To get the columnFill property
object.style.columnFill
  • To set the columnFill property
object.style.columnFill= "balance|initial|auto|inherit"

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.

Example: 

html




<!DOCTYPE html>
<html>
<head>
    <title>
      HTML | DOM Style columnFill Property
    </title>
</head>
<body>
 
    <div id="example">
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
      GEEKSFORGEEKS welcomes you to the learning portal.
 
    </div>
    <button onclick="split()">click</button>
 
    <script>
        function split() {
 
            document.getElementById(
              "example").style.columnFill = "auto";
        }
    </script>
 
</body>
 
</html>

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

Supported Browsers: The browsers supported by HTML | DOM Style columnFill Property.

  • Google Chrome 50 and above
  • Edge 12 and above
  • Internet Explorer 10 and above
  • Firefox 52 and above
  • Opera 37 and above
  • Safari 9 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!