LAST UPDATED: JUNE 25, 2021
CSS column-count Property
CSS column-count property is used to count the number of specified columns of an element. The auto value determines the number of columns, which is determined by other properties in CSS like column-width. The integer value strictly refers to the positive integer, which describes the ideal number of columns inside which the content of the element would be flown.
Syntax for the column-count property:
Following is the syntax for the column-count property.
column-count: auto;
Example: CSS column-count property
Here in the example below, we are using the column-count property with different border colors, border styles, and different values. In this case, we have given the column-count of the text as 3. Hence, this breaks the text into three columns.
<!DOCTYPE html>
<html>
<head>
<title>The column-count property in CSS</title>
<style type="text/css">
.content-box {
column-count: 3;
color: red;
}
</style>
</head>
<body>
<p class="content-box">Study Tonight is the best platform to learn digital courses in a simplified way</p>
</body>
</html>
Output:
Example 2: CSS column-count property
Here in the example below, we are using the column-count property with different border colors, border styles, and different values. In this case, we have given the column-count of the text as 4. Hence, this breaks the text into four columns.
<!DOCTYPE html>
<html>
<head>
<title>The column-count property in CSS</title>
<style type="text/css">
.content-box {
column-count: 4;
color: purple;
}
</style>
</head>
<body>
<p class="content-box">Studytonight Library Learn various programming languages and computer subjects, in the most simple and detailed form.</p>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
50 |
50 |
| Edge |
12 |
12 |
| Firefox |
52 |
52 |
| Internet Explorer |
10 |
10 |
| Opera |
11.1 |
11.1 |
| Safari |
9 |
9 |
| Webview Android |
50 |
50 |
| Chrome Android |
50 |
50 |
| Firefox Android |
52 |
52 |
| Opera Android |
11.1 |
11.1 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
5.0 |
5.0 |
Conclusion:
The initial value for the column-count property is auto. This property is applicable to the block containers except for the table wrapper boxes. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is an integer.
