CSS column-count property

The column-count property in CSS breaks the content of an element into a number of specified columns. 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.