CSS gridautocolumns Property (original) (raw)

CSS grid-auto-columns Property

Last Updated : 11 Jul, 2025

The **grid-auto-columns CSS property specifies the size of implicitly-created grid columns using values like auto, lengths, percentages, minmax(), and more, ensuring flexible and controlled grid column sizing.

**Syntax

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

**Property Values

Property Value Description
**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: Using grid-auto-columns: auto

In this example we defines a grid container where items are placed into named areas using grid-template-areas. The grid-auto-columns property sets the width of columns not explicitly defined.

HTML `

CSS grid-auto-column Property 
<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>
1
2
3
4
5

`

**Output:

Example 2: Using grid-auto-columns: length

In this example we creates a grid container with fixed-width columns using grid-auto-columns. Each item inside has a centered text with a white background.

HTML `

CSS grid-auto-column Property 
<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>
1
2
3
4
5

`

**Output:

**Example 3: Using grid-auto-columns: percentage

In this example we creates a grid container with columns set to 30% width of the container. Each item features centered text with a white background for a clean visual presentation.

HTML `

CSS grid-auto-column container Property 
<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>
1
2
3
4
5

`

**Output:

**Using grid-auto-columns: minmax(min, max)

In this example we defines a grid container where columns dynamically adjust between 100px and 4cm. Each item has centered text with a white background, creating a visually structured layout.

HTML `

CSS grid-auto-column Property