Skip to content
Related Articles

Related Articles

CSS | grid-auto-columns Property

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

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: 

HTML




<!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: 

HTML




<!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: 

HTML




<!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: 

HTML




<!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: 

HTML




<!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: 

HTML




<!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 and above
  • Edge 16.0 and above
  • Firefox 70 and above
  • Internet Explorer 10.0 and above
  • Safari 10.1 and above
  • Opera 44.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!