New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#grid-auto-columns
Defines the size of grid columns that were created implicitly: it means that grid-auto-columns targets the columns that were not defined with grid-template-columns or grid-template-areas.
default
grid-auto-columns: auto;
The implicity-created columns have an auto size.
grid-auto-columns: 100px;
Here we combine grid-template-areas: "header header header" "sidebar main main" with grid-template-columns: 50px 200px.
In this situation, the grid-template-areas defines 3 columns, while the grid-template-columns only defines 2 column widths.
As a result, the third column width takes its value from the grid-auto-columns property: 100px.