CSS grid-auto-columns Property

CSS grid-auto-columns property specifies the size of the columns which are created implicitly. A column is called an implicitly created column if its size is not defined by the grid-template-columns or the grid-template-areas property.

In simple words, we can say that the grid-auto-columns property only affects the columns which are not sized by the grid-template-columns or the grid-template-areas property.

In the example below, the first column is not an implicitly created column. Because its size is defined by the grid-template-columns property. This column will not be affected by the grid-auto-columns property. The grid-auto-columns property will only affect the second and the third column as they are created implicitly.

The property grid-auto-columns: 150px 200px; in the example below will set the width of the second column to 150px and the third column to 200px. Try it out:

Example:

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

CSS Syntax

The grid-auto-columns property has the following syntax:

grid-auto-columns: auto|length|min-content|max-content|initial|inherit;

Property Values

The grid-auto-columns property accepts the following values:

autoThis is the default value. The browser itself determines the size of the column.
lengthSpecifies the size of the column in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
min-contentDefines the minimum possible size that a column can have without disturbing the grid layout.
max-contentDefines the maximum possible size that a column can have without disturbing the grid layout.
initialSets the grid-auto-columns property to its default value(auto).
inheritInherits the grid-auto-columns property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.gridAutoColumns = “150px 200px”