The column-count property in CSS is used to divide a portion of content inside any HTML element into a given number of columns.
Default Value: auto
Syntax:
column-count: number|auto|initial|inherit;
Property Values:
- number: This value is used to indicate the number of columns.
- auto: It is the default value. The number of columns is determined by other properties.
- initial: This value is used to set the property to the default value.
- inherit: It inherits the property from its parent.
Example 1: This example shows the use of the column-count property.
html
<!DOCTYPE html>
<html>
<head>
<title>column count property</title>
<style>
.gfg {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
/* divides text in 2 columns */
}
h1 {
color: green;
}
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
Example of column-count Property
</h2>
<div class="gfg">
The course is designed for students as
well as working professionals to prepare
for coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe etc.
</div>
</body>
</html>
|
Output:
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<title>column count property</title>
<style>
.gfg {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule: 10px double green;
-moz-column-rule: 10px double green;
column-rule: 10px double green;
text-align: justify;
}
h1 {
color: green;
}
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
Example column-count Property
</h2>
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going to
have coding questions from school level to
the level needed for product based companies
like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
|
Output:
Supported Browser: The browser supported by column-count property are listed below:
- Google Chrome 50.0 and above
- Edge 12.0 and above
- Firefox 52.0 and above
- Safari 9.0 and above
- Opera 11.1 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
02 Aug, 2023
Like Article
Save Article