Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to fill columns with JavaScript?
In this tutorial, we will learn how to fill columns with JavaScript using the columnFill property. This CSS property controls how content is distributed across multiple columns - either sequentially (auto) or with equal distribution (balance).
The columnFill property specifies how columns should be filled when using CSS multi-column layout. It works in conjunction with columnCount to create responsive column layouts.
Syntax
Following is the syntax to set the columnFill property in JavaScript:
selectedElement.style.columnFill = "value";
Here selectedElement is the DOM element you want to modify. The style property allows you to set CSS properties directly from JavaScript. After accessing style, specify columnFill and assign a valid value as a string.
columnFill Property Values
- balance ? Default value that distributes content equally across all columns, maintaining similar heights
- auto ? Fills columns sequentially from left to right until each column reaches its maximum height
- initial ? Resets the property to its default value (balance)
- inherit ? Inherits the columnFill value from the parent element
NOTE: Use the columnCount property to specify the number of columns. The syntax is similar but takes a numeric value as a string.
Example 1: Using "balance" Value
The following example demonstrates content distribution with the balance value:
<html>
<head>
<title>How to fill columns with JavaScript?</title>
</head>
<body>
<p>Click "Fill the columns" to create three columns with equal content distribution.</p>
<button onclick="display()">Fill the columns (with balance value)</button>
<p id="result">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<script>
function display() {
document.getElementById("result").style.columnCount = "3";
document.getElementById("result").style.columnFill = "balance";
}
</script>
</body>
</html>
This example creates three columns with content distributed equally across each column using the balance value.
Example 2: Using "auto" Value
The following example shows sequential column filling with the auto value:
<html>
<body>
<button onclick="display()">Fill the columns (with auto value)</button>
<p id="result">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<script>
function display() {
document.getElementById("result").style.columnCount = "3";
document.getElementById("result").style.columnFill = "auto";
}
</script>
</body>
</html>
With auto value, columns fill sequentially and may have unequal heights depending on content flow.
Example 3: Using "inherit" Value
This example demonstrates how child elements inherit columnFill values from their parents:
<html>
<body>
<button onclick="display()">Fill the columns (with inherit value)</button>
<h3>Parent content will appear in three columns.</h3>
<div id="columns">I'm the parent element. I'm the parent element.
I'm the parent element. I'm the parent element.
I'm the parent element. I'm the parent element. I'm the parent
element. I'm the parent element. I'm the parent
element. I'm the parent element. I'm the parent element. I'm the
parent element. I'm the parent element. I'm the
parent element. I'm the parent element. I'm the parent element.
I'm the parent element. I'm the parent element.
I'm the parent element. I'm the parent element. I'm the parent
element. I'm the parent element. I'm the parent
element. I'm the parent element. I'm the parent element.</div>
<h3>Child content will appear in four columns.</h3>
<p id="result">I'm the child element. I'm the child element. I'm the
child element. I'm the child element. I'm the
child element. I'm the child element. I'm the child element. I'm
the child element. I'm the child element. I'm
the child element. I'm the child element. I'm the child element.
I'm the child element. I'm the child element.
I'm the child element. I'm the child element. I'm the child
element. I'm the child element. I'm the child
element. I'm the child element. I'm the child element. I'm the
child element. I'm the child element. I'm the child
element. I'm the child element. I'm the child element.
</p>
<script>
function display() {
document.getElementById("columns").style.columnCount = "3";
document.getElementById("columns").style.columnFill = "auto";
document.getElementById("result").style.columnCount = "4";
document.getElementById("result").style.columnFill = "inherit";
}
</script>
</body>
</html>
In this example, the div parent element uses auto value, while the p child element inherits this same behavior from its parent.
Comparison of columnFill Values
| Value | Behavior | Use Case |
|---|---|---|
balance |
Equal content distribution | Magazine-style layouts |
auto |
Sequential filling | Long-form content |
inherit |
Uses parent's value | Consistent nested layouts |
Conclusion
The columnFill property provides flexible control over multi-column layouts in JavaScript. Use "balance" for equal distribution and "auto" for sequential filling based on your design needs.
775 Views
