CSS | column-width Property - GeeksforGeeks

28 Apr, 2021
The columns-width property in CSS is used to define the width of the columns. The minimum number of columns are require to show the content across the element. It is a flexible property. If the browser cannot fit at least two-columns at given column-width then the two columns will put into a single column.Syntax:  
column-width: auto|length|initial|inherit; 
Property Values:  
auto: It is the default value. The browser determine the width of the columns.Syntax:  
column-width: auto;
Example:  
html
<!DOCTYPE html><html>    <head>        <title>            CSS column-width Property        </title>                 <style>            .gfg {                                 /* For Chrome, Safari, Opera browsers */                -webkit-column-width: auto;                                 /* For Firefox browser */                -moz-column-width: auto;                                 column-width: auto;            }        </style>    </head>         <body>        <h2 >            The column-width 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:  
length: It is used to specify the width of the columns in terms of length. The length can be set in form of px, cm etc.Syntax:  
column-width: length;
Example:  
html
<!DOCTYPE html><html>    <head>        <title>            CSS column-width Property        </title>                 <style>            .gfg {                                 /* For Chrome, Safari, Opera browsers */                -webkit-column-width: 100px;                                 /* For Firefox browser */                -moz-column-width: 100px;                                 column-width: 100px;            }        </style>    </head>         <body>        <h2 >            The column-width 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:  
initial: It is used to set the column-width property to its default value.Syntax:  
column-width: initial;
Example:  
html
<!DOCTYPE html><html>    <head>        <title>            CSS column-width Property        </title>                 <style>            .gfg {                                 /* For Chrome, Safari, Opera browsers */                -webkit-column-width: initial;                                 /* For Firefox browser */                -moz-column-width: initial;                                 column-width: initial;            }        </style>    </head>         <body>        <h2 >            The column-width 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:  
inherit: It is used to set column-width property from its parent.
Supported Browsers: The browser supported by column-width property are listed below:  
Google Chrome 50.0, 4.0-webkit
Internet Explorer 10.0
Firefox 52.0, 2.0-moz-
Opera 37.0, 15.0-webkit-, 11.1
Safari 9.0, 3.1-webkit
 
arorakashish0911
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to create footer to stay at the bottom of a Web page?
Remove elements from a JavaScript Array
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript
Installation of Node.js on Linux