In this section, we will learn what the grid-auto-columns property is and how to use it in CSS.
CSS grid-auto-columns Property Definition and Usage
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
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.