Short Response
The reason why grid-auto-columns is not having any impact is due to the lack of columns in the implicit grid.
Clarification
In the realm of CSS Grid Layout, there exist explicit and implicit grids.
An explicit grid is one that you define explicitly. This type of grid is created when using properties such as:
grid-template-rowsgrid-template-columnsgrid-template-areasgrid (which encompasses the above three properties, and more)
Despite not being limited to confining grid items within the explicit grid, you can place items anywhere including outside this designated area, which leads to the concept of the implicit grid.
The implicit grid emerges from automatically generated rows and columns required to accommodate items positioned beyond the confines of the explicit grid.
While grid-template-columns and grid-template-rows dictate the size of explicit tracks, grid-auto-columns and grid-auto-rows determine the size of implicit tracks.
Upon reviewing your code, it reveals two columns and three rows within the defined explicit grid.
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-auto-columns: 50px;
grid-auto-rows: 200px;
grid-gap: 20px;
}
The three explicit rows share an equal distribution of free space (1fr). Additional rows will be set at a height of 200px.
The two explicit columns also take up an equal allocation of free space, with additional columns sized at 50px width.
However, with only two columns present in your code and no columns beyond the explicit grid boundaries, the grid-auto-columns property fails to have any effect.
Below are definitions for these types of grids according to the specification:
7.1. The Explicit
Grid
The triplet of grid-template-rows, grid-template-columns,
and grid-template-areas collectively outline the explicit grid within a grid container.
The grid shorthand provides a convenient way to configure all three simultaneously.
If grid items extend beyond the explicit grid, implicit tracks are introduced, characterized by the grid-auto-rows and
grid-auto-columns properties.
7.5. The Implicit
Grid
The properties grid-template-rows, grid-template-columns, and
grid-template-areas establish a fixed number of tracks defining the explicit grid.
If grid items surpass these bounds, the grid
container generates implicit grid tracks via the addition of implicit grid lines.
Together with the explicit grid, these lines constitute the implicit grid.
The grid-auto-rows and grid-auto-columns properties determine the size of these implicit grid tracks.