CSS | grid-auto-columns Property

Last Updated : 08 Aug, 2019

The grid-auto-columns property in CSS is used to specify the size for the columns of implicitly generated grid containers.

Syntax:

grid-auto-columns: auto|max-content|min-content|length|
percentage|minmax(min, max)|initial|inherit;

Property Values:

auto: It is the default value. The size is determined implicitly according to the size of the container.

Example 1:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS grid-auto-column Property  
        </title>  
            
        <style>  
            .main {  
                display: grid;  
                grid-template-areas: "a a";  
                grid-gap: 20px;  
                padding: 30px;  
                background-color: green; 
                grid-auto-columns:  auto; 
                
            }  
            .GFG {  
                text-align: center;  
                font-size: 35px;  
                background-color: white;  
                padding: 20px 0;  
            }  
        </style>  
    </head>  
        
    <body>  
        <div class = "main">  
            <div class = "GFG">1</div>  
            <div class = "GFG">2</div>  
            <div class = "GFG">3</div>  
            <div class = "GFG">4</div>  
            <div class = "GFG">5</div>  
        </div>  
    </body>  
</html>  

Output:

length: It is used to specify the size as integer length. Negative values are not allowed.

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS grid-auto-column Property  
        </title>  
            
        <style>  
            .main {  
                display: grid;  
                grid-template-areas: "a a";  
                grid-gap: 20px;  
                padding: 30px;  
                background-color: green; 
                grid-auto-columns: 8.5cm; 
                
            }  
            .GFG {  
                text-align: center;  
                font-size: 35px;  
                background-color: white;  
                padding: 20px 0;  
            }  
        </style>  
    </head>  
        
    <body>  
        <div class = "main">  
            <div class = "GFG">1</div>  
            <div class = "GFG">2</div>  
            <div class = "GFG">3</div>  
            <div class = "GFG">4</div>  
            <div class = "GFG">5</div>  
        </div>  
    </body>  
</html>  

Output:

percentage: It specifies the size as percentage value.

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS grid-auto-column container Property  
        </title>  
            
        <style>  
            .main {  
                display: grid;  
                grid-template-areas: "a a";  
                grid-gap: 20px;  
                padding: 30px;  
                background-color: green; 
                grid-auto-columns:  30%; 
                
            }  
            .GFG {  
                text-align: center;  
                font-size: 35px;  
                background-color: white;  
                padding: 20px 0;  
            }  
        </style>  
    </head>  
        
    <body>  
        <div class = "main">  
            <div class = "GFG">1</div>  
            <div class = "GFG">2</div>  
            <div class = "GFG">3</div>  
            <div class = "GFG">4</div>  
            <div class = "GFG">5</div>  
        </div>  
    </body>  
</html>  

Output:

max-content: It specifies the size depending on the largest item in the container.
min-content: It specifies the size depending on the smallest item in the container.

minmax(min, max): It specifies the size in the range of [min, max]. greater than or equal to min and less than or equal to max.

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS grid-auto-column Property  
        </title>  
            
        <style>  
            .main {  
                display: grid;  
                grid-template-areas: "a a";  
                grid-gap: 20px;  
                padding: 30px;  
                background-color: green; 
                grid-auto-columns:  minmax(100px, 4cm); 
                
            }  
            .GFG {  
                text-align: center;  
                font-size: 35px;  
                background-color: white;  
                padding: 20px 0;  
            }  
        </style>  
    </head>  
        
    <body>  
        <div class = "main">  
            <div class = "GFG">1</div>  
            <div class = "GFG">2</div>  
            <div class = "GFG">3</div>  
            <div class = "GFG">4</div>  
            <div class = "GFG">5</div>  
        </div>  
    </body>  
</html>  

Output:

initial: It sets the grid-auto-columns property to its default value.

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS grid-auto-column Property  
        </title>  
            
        <style>  
            .main {  
                display: grid;  
                grid-template-areas: "a a";  
                grid-gap: 20px;  
                padding: 30px;  
                background-color: green; 
                grid-auto-columns: initial; 
                
            }  
            .GFG {  
                text-align: center;  
                font-size: 35px;  
                background-color: white;  
                padding: 20px 0;  
            }  
        </style>  
    </head>  
        
    <body>  
        <div class = "main">  
            <div class = "GFG">1</div>  
            <div class = "GFG">2</div>  
            <div class = "GFG">3</div>  
            <div class = "GFG">4</div>  
            <div class = "GFG">5</div>  
        </div>  
    </body>  
</html>  

Output:

inherit: It sets the grid-auto-columns property from its parent element.

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS grid-auto-column Property  
        </title>  
            
        <style>  
            .main {  
                display: grid;  
                grid-template-areas: "a a";  
                grid-gap: 20px;  
                padding: 30px;  
                background-color: green; 
                grid-auto-columns:  inherit; 
                
            }  
            .GFG {  
                text-align: center;  
                font-size: 35px;  
                background-color: white;  
                padding: 20px 0;  
            }  
        </style>  
    </head>  
        
    <body>  
        <div class = "main">  
            <div class = "GFG">1</div>  
            <div class = "GFG">2</div>  
            <div class = "GFG">3</div>  
            <div class = "GFG">4</div>  
            <div class = "GFG">5</div>  
        </div>  
    </body>  
</html>  

Output:

Supported Browsers: The browser supported by grid-auto-columns property are listed below:

Chrome 57.0
Edge 16.0
Firefox 52.0
Safari 10.0
Opera 44.0

My Personal Notes

Related Articles