Introduction to CSS Column
The following article provides an outline for CSS Column. This property is used when we want to set how many numbers of columns can be created in an element or how to set column width. This property can also take multiple values as this is also a shorthand property in CSS. In CSS, column property has column- count and column-width or both as other sub-properties of the column property. These sub-properties are used to create a flexible multi-column layout for an element. The column-count property is used for setting up the maximum number of columns and the column-width property is used for setting up the width of each column in any layout of an element.
Working of CSS Column Property with Examples
The column property is one of the properties of CSS to set the maximum number of columns and also can set the width of each column using the sub-properties of column property like column-count and column-width. These two properties are used for a multi-column layout which can make the layout of an element flexible. There are some other column properties like column-fill, column-span, column-gap, column-rule, break-inside, etc. This column property is supported by the following browsers with different versions such as Google Chrome, Edge, Firefox, Opera, Safari, etc.
Syntax of column property:
Column: column-width | column-count | auto | initial | inherit;
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<Title>Educba Training </Title>
<style>
.newspaper1 {
columns: 120px 3;
}
</style>
</head>
<body>
<h1>The CSS columns Property</h1>
<p>The columns property is a shorthand property for column-width and column-count:</p>
<p><strong>Set the minimum width for each column to 120px, and the maximum number of columns to 3:</strong></p>
<div class="newspaper1">
EDUCBA is an online training provider, teaches you real world skill on everything from Investment Banking to Programming to Project Management to Design and many more.
EDUCBA is a leading global provider of skill based online education. It offers amazing 1700+ courses across 10+ verticals prepared by top notch professionals from the industry which are job oriented skill based programs demanded by the industry. Through its online feature you can learn at any time & anyplace so plan your study to suit your convenience & schedule. EDUCBA is currently catering more than 500,000+ learners across 40+ countries.
</div>
</body>
</html>
Output:
In the above program, we can see that we have specified the column-width as 120px and column-count as “3”.
1. auto
This property sets the column-count and column-width of the default value which is set by browsers. This property specifies the default value which is given by browser if column-count or column-width is not specified.
4.5 (4,071 ratings)
View Course
Syntax:
column : auto auto;
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
body {
text-align: left;
color: blue;
}
.GFG {
-webkit-columns: auto auto;
-moz-columns: auto auto;
columns: auto auto;
}
</style>
</head>
<body>
<h1>The CSS column Property</h1>
<div class="GFG">
<p>
<strong>A list of famous writers:</strong>
<p>
William Shakespear: English poet and playwright. Famous
plays include Macbeth, Romeo and Juliet, Merchant of Venice
and Hamlet. Shakespeare is widely considered the seminal
writer of the English language.
</p>
<p>
Jonathan Swift: Anglo-Irish writer born in Dublin. Swift was
a prominent satirist, essayist and author. Notable works
include Gulliver’s Travels (1726), A Modest Proposal and A
Tale of a Tub.
</p>
<p>
Samuel Johnson: British author best-known for his
compilation of the English dictionary. Although not the
first attempt at a dictionary, it was widely considered to
be the most comprehensive – setting the standard for later
dictionaries.
</p>
</p>
</div>
</body>
</html>
Output:
In the above program, we have specified the column property with auto value where it will take the column-count and column-width with default value which is specified by the browser itself.
2. initial
This property value initializes the property value to initial default values.
Syntax:
column: initial;
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
body {
text-align: center;
color: red;
}
.GFG {
-webkit-columns: initial initial;
-moz-columns: initial initial;
columns: initial initial;
}
</style>
</head>
<body>
<h1>The CSS column Property</h1>
<p>
<strong>A list of famous writers:</strong>
<p>
William Shakespear: English poet and playwright. Famous
plays include Macbeth, Romeo and Juliet, Merchant of Venice
and Hamlet. Shakespeare is widely considered the seminal
writer of the English language.
</p>
<p>
Jonathan Swift: Anglo-Irish writer born in Dublin. Swift was a prominent satirist, essayist and author. Notable works
include Gulliver’s Travels (1726), A Modest Proposal and A
Tale of a Tub.
</p>
<p>
Samuel Johnson: British author best-known for his
compilation of the English dictionary. Although not the
first attempt at a dictionary, it was widely considered to
be the most comprehensive – setting the standard for later
dictionaries.
</p>
</p>
</div>
</body>
</html>
Output:
In the above program, we can see that we have the column property with value as initial. This value will take the initially assigned value to the column property as the value.
3. inherit
This value is used when you want to take the value as the parent element then we can specify the column property with value as inherit so that we can inherit the value from the parent element.
Syntax:
column: inherit;
Sample Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
body {
text-align: left;
color: green;
}
.GFG {
-webkit-columns: inherit inherit;
-moz-columns: inherit inherit;
columns: inherit inherit;
}
</style>
</head>
<body>
<h1>The CSS column Property</h1>
<p>
<strong>Our team includes:</strong>
<p>
William Shakespear: English poet and playwright. Famous plays include Macbeth, Romeo and Juliet, Merchant of Venice and Hamlet. Shakespeare is widely considered the seminal writer of the English language.
</p>
<p>
Jonathan Swift: Anglo-Irish writer born in Dublin. Swift was a prominent satirist, essayist and author. Notable works include Gulliver’s Travels (1726), A Modest Proposal and A Tale of a Tub.
</p>
<p>
Samuel Johnson: British author best-known for his compilation of the English dictionary. Although not the first attempt at a dictionary, it was widely considered to be the most comprehensive – setting the standard for later dictionaries.
</p>
</p>
</div>
</body>
</html>
</html>
Output:
In the above program, we can see that the column property we have specified as inherit value which will take the values of its parent element’s value as the present value.
Conclusion
In this article, we conclude that the column property in CSS is used to specify or create the text in the column which is done using this column property which has column-count and column width as the most preferable value of this property. These values help to specify the maximum number of columns and also help to specify the column width of each column. There are values like auto – which take the default value that is specified by the browser, initial – which takes the initial default value, inherit – which takes the value as its parent element’s value.
Recommended Articles
This is a guide to CSS Column. Here we discuss the introduction to CSS Column and working of column property with sample code. You may also have a look at the following articles to learn more –
