CSS column-fill Property

February 10, 2021 12:37 pm IST

You are Here:

CSS column-fill Property

CSS column-fill property controls how an element's contents are balanced when broken into columns.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid #267326; padding: 10px; margin-bottom: 25px; height: 75px; column-count: 2; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ } #point{ -moz-column-fill: auto; /* Firefox */ column-fill: auto; } #point1{ -moz-column-fill: balance; /* Firefox */ column-fill: balance; } #point2{ -moz-column-fill: balance-all; /* Firefox */ column-fill: balance-all; } </style> </head> <body> <h1>CSS column-fill Property</h1> <h2>column-fill: auto</h2> <div id="point"> Joanne Rowling was born on 31st July 1965 at ... </div> <h2>column-fill: balance</h2> <div id="point1"> Joanne Rowling was born on 31st July 1965 at ... </div> <h2>column-fill: balance-all</h2> <div id="point2"> Joanne Rowling was born on 31st July 1965 at ... </div> </body> </html>

Run

Syntax

Using CSS

element{ column-fill: balance; }

Using Javascript

object.style.columnFill="balance";

Animatable

Yes, column-fill property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS column-fill property is auto.

Property Value

The following table provides a list of values for CSS column-fill property.

Value	Explanation
auto	Specifies that the columns are filled sequentially. Content takes up only the room it needs.
balance	Specifies that the content is equally divided between columns. In paged media, only the last page is balanced.
balance-all	Specifies that the content is equally divided between columns. In paged media, all pages are balanced.

Using JavaScript

In the following example, we will demonstrate how to change the CSS column-fill property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid #267326; padding: 10px; margin-bottom: 25px; height: 75px; column-count: 2; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-fill: auto; -moz-column-fill: auto; /* Firefox */ } </style> </head> <body> <h1>CSS column-fill Property</h1> <div> Joanne Rowling was born on 31st July 1965 at ... </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.columnFill = "balance"; x.style.WebkitColumnFill = "balance"; x.style.MozColumnFill = "balance"; } </script> </body> </html>

Run