In this section, we will learn what the grid-auto-columns property is and how to use it in CSS.

Click here to run the example of grid-auto-columns property.

CSS grid-auto-columns Property Definition and Usage

When we create a grid, we can explicitly declare how many rows and columns the grid should have via `grid-template-rows` and `grid-template-columns` properties, respectively.

This is an explicit declaration and the problem with it is the fact that if we added more items than the number of available cells, the rest of items will not have the height or width declared using these properties.

So in order to solve this problem CSS provided two new properties, named `grid-auto-columns` and `grid-auto-rows`.

Note: This section is about `grid-auto-columns` and you can read about `grid-auto-rows` in its section.

The CSS `grid-auto-columns` is used to set the width of those columns that are implicitly added to the grid.

Also, you should know that the values set for this property cannot override the values set using `grid-template-columns`.

Basically, this property only sets the size of those columns that are implicitly added by browsers.

CSS grid-auto-columns Property Syntax

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

CSS grid-auto-columns Property Value

The type of values we set for this property is exactly the same as `grid-template-columns` but there’s on important note to consider:

Let’s say we used this property in this way:

grid-auto-columns: 100px 300px;

The first implicit column will have the width of the first value and the second implicit column will have the width of the second value of this property.

Now, if for any reason a third implicit column was created, the width of that column will be equal to the first value set for this property. And of course, if later on there’s a fourth column, it will then have the width of the second value set for this property.

Technically, the values set for `grid-auto-columns` cycles, which means the first implicit column will take the first number of this property and the second column will take the second number and so on until the numbers set as the value of this property reach to its end which in that case browsers will pick from the first value and repeat the process for the next implicit columns.

Example: grid-auto-columns property in CSS

See the Pen grid-auto-columns property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS grid-auto-columns Property

See the Pen CSS grid-auto-columns Property by Omid Dehghan (@enjoytutorials1) on CodePen.