New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →


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.