CSS | column-width Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 Amazom, Microsoft, Adobe, etc. 
            </div
        </body
    </html>                                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 Amazom, Microsoft, Adobe, etc. 
            </div
        </body
    </html>                                     

    chevron_right

    
    

    Output:

  • initial: It is used to set the column-width property to its default value.

    Syntax:

    column-width: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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 Amazom, Microsoft, Adobe, etc. 
            </div
        </body
    </html>                                  

    chevron_right

    
    

    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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.