CSS grid-auto-columns Property

Set a default size for the columns in a grid:

.grid-container {
display: grid;
grid-auto-columns: 50px;
}

Definition and Usage

The grid-auto-columns property sets a size for the columns in a grid container.

This property affects only columns with the size not set.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS Grid Layout Module Level 1
JavaScript syntax:	object.style.gridAutoColumns="120px" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-auto-columns	57	16	52	10	44

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

Value	Description	Demo
auto	Default value. The size of the columns is determined by the size of the container	Demo ❯
fit-content()
max-content	Sets the size of each column depending on the largest item in the column	Demo ❯
min-content	Sets the size of each column depending on the smallest item in the column	Demo ❯
minmax(min.max)	Sets a size range greater than or equal to min and less than or equal to max
length	Sets the size of the columns, by using a legal length value. Read about length units	Demo ❯
%	Sets the size of the columns, by using a percent value	Demo ❯

CSS Reference: The grid-auto-rows property