CSS grid-auto-columns property


When we do not specify the grid-template-columns to place an item or we place an item beyond the number of a columns, the implicit tracks are automatically created to place an item. And 'grid-auto-columns' specifies the size of those implicit tracks.

For example, we have a grid with a first column of size 20px explicitly define by grid-template-columns.

What If want to place an item in the second column that was not defined explicitly?

In this case, the second column is defined automatically. We define the implicit track size of second column with grid-auto-columns.


grid-auto-columns : auto | [track-size]+

Property values


The column occupies all the available space.

grid-auto-columns: auto;


The track size of second column is 40px defined implicitly. This pattern may be repeated to place more items in more columns.

grid-auto-columns: 40px;


The track size of second column is 120px defined implicitly.

grid-auto-columns: 120px;

Applicable to

It applies to grid containers.

#CSS digger
Was this article helpful?