CSS column-count property breaks an element's content into the specified number of columns.
Example
HTML Online Editor
<!DOCTYPE html>
<htmllang="en-US">
<head>
<style>
div{
border: 1pxsolid#267326;
padding: 10px;
margin-bottom: 25px;
column-count: 2;
-webkit-column-count: 2; /* Chrome, Safari, Opera */-moz-column-count: 2; /* Firefox */
}
</style>
</head>
<body>
<h1>CSS column-count Property</h1>
<div>
Joanne Rowling was born on 31st July 1965 at Yate General Hospital near Bristol, and grew up in Gloucestershire in England and in Chepstow, Gwent, in south-east Wales.
</div>
</body>
</html>
Default value for CSS column-count property is auto.
Property Value
The following table provides a list of values for CSS column-count property.
Value
Explanation
auto
Specifies the number of columns to be used.
Number
Defines the number of columns into which the content of the element will be flowed.
Using JavaScript
In the following example, we will demonstrate how to change the CSS column-count property of an element using JavaScript.
Example
HTML Online Editor
<!DOCTYPE html>
<htmllang="en-US">
<head>
<style>
div{
border: 1pxsolid#267326;
padding: 10px;
margin-bottom: 25px;
column-count: 2;
-webkit-column-count: 2; /* Chrome, Safari, Opera */-moz-column-count: 2; /* Firefox */
}
</style>
</head>
<body>
<h1>CSS column-count Property</h1>
<div>
Joanne Rowling was born on 31st July 1965 at Yate General Hospital near Bristol, and grew up in Gloucestershire in England and in Chepstow, Gwent, in south-east Wales.
</div>
<buttononclick="myFunction()">Click Me</button>
<script>
varx=document.getElementsByTagName("div")[0];
functionmyFunction(){
x.style.columnCount="3";
x.style.WebkitColumnCount="3";
x.style.MozColumnCount="3";
}
</script>
</body>
</html>
