grid-auto-columns property in CSS

A simple grid-auto-columns property example:

.grid-container {
    display: grid;
    grid-auto-columns: 60px;
    grid-gap: 15px;
    background-color: #2196F3;
    padding: 15px;
}

Laboratory

description & Usage

To determine the size of the columns of a grid layout, we use the grid-auto-columns property.

#	Description
Default Value	auto
Inherited	no
Animatable	yes
Version	CSS Grid Layout Module Level 1
JavaScript syntax	object.style.gridAutoColumns="120px"

#	Chrome	Edge	Firefox	Safari	Opera
grid-auto-columns

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

Values	Description
auto	Default
max-content	Sets the size of each column to be the same size as the largest column.
min-content	Sets the size of each column to be the same size as the smallest column.