Skip to content
Related Articles

Related Articles

CSS | column-width Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022

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 and above
  • Edge 12.0 and above
  • Internet Explorer 10.0 and above
  • Firefox 50.0 and above
  • Opera 11.1 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!