Open In App

CSS grid-auto-columns Property

Improve
Improve
Like Article
Like
Save
Share
Report

The grid-auto-columns property in CSS is used to specify the size of 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. 
  • length: It is used to specify the size as an integer length. Negative values are not allowed. 
  • percentage: It specifies the size as a percentage value. 
  • 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. 
  • initial: It sets the grid-auto-columns property to its default value. 
  • inherit: It sets the grid-auto-columns property from its parent element. 

Example 1: In this article, we are using grid-auto-columns: auto property.

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:

Example: In this article, we are using the grid-auto-columns: length property.

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:

Example: In this example, we are using grid-auto-columns: percentage property.

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: 

Example: In this example, we are using grid-auto-column :minmax() property.

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:

Example: In this example, we are using grid-auto-column: initial property.

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:

Example: In this example, we are using grid-auto-column: inherit property.

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


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads