🎯 CSS grid-auto-columns Property

grid-auto-columns is a CSS Grid property that defines the width of automatically created columns. When a grid item is placed outside the existing structure, new columns are generated and their width is controlled by this property.

Column width is automatically calculated based on content.

Column expands to fit the maximum size of its content.

Column shrinks to the minimum size required by its content.

You can define a fixed or flexible column width using units like px, %, or fr.

.grid {
    display: grid;
    grid-auto-columns: 200px;
}
                

Resets the property to its default value.