Trending September 2023 # Guide To Working Of Css Column Property With Examples # Suggested October 2023 # Top 18 Popular

You are reading the article Guide To Working Of Css Column Property With Examples updated in September 2023 on the website Nhunghuounewzealand.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Guide To Working Of Css Column Property With Examples

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, the 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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Working on CSS Column Property

Syntax of column property:

Example: Code:

.newspaper1 { columns: 120px 3; } 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.

Output:

In the above program, we can see that we have specified the column width as 120px and the column count as “3”.

1. auto

This property sets the column count and column width to the default value that browsers set. The browser assigns the default value if the column count or column width is not determined.

Syntax:

column : auto auto;

Sample Code:

Educba Training body { text-align: left; color: blue; } .GFG { -webkit-columns: auto auto; -moz-columns: auto auto; columns: auto auto; } William Shakespeare: 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. 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. 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.

Output:

In the above program, we have specified the column property with auto value, which will take the column count and width with a default value specified by the browser itself.

2. initial

This property value initializes the property value to initial default values.

Syntax:

column: initial;

Sample Code:

Educba Training body { text-align: center; color: red; } .GFG { -webkit-columns: initial initial; -moz-columns: initial initial; columns: initial initial; } William Shakespeare: 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. 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. 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.

Output:

In the above program, we 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

Syntax:

column: inherit;

Sample Code:

Educba Training body { text-align: left; color: green; } .GFG { -webkit-columns: inherit inherit; -moz-columns: inherit inherit; columns: inherit inherit; } William Shakespeare: 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. 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. 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.

Output:

In the above program, we can see that the column property we specified as inherit value 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 specifies or creates the text in the column. You can achieve this by utilizing the column property and considering column count and column width as the most preferable values for 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 takes the default value specified by the browser, initial – which takes the initial default value, and inherit – which takes the value as its parent element’s value.