CSS `grid-auto-columns` Property

Example

Set the default size of columns in the grid:

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

Property	Chrome	Edge	Firefox	Safari	Opera
grid-auto-columns	57	16	52	10	44

The grid-auto-columns property is used to set the default size of columns in a grid container.

This property only affects columns that do not have a size 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
---	---

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

Value	Description
auto	Default value. The size of the columns is determined by the size of the container.
fit-content()	Equivalent to the formula min(max-content, max(auto, argument)), similar to auto's calculation (i.e., minmax(auto, max-content)).
max-content	Sets the size of each column based on the largest grid item in the column.
min-content	Sets the size of each column based on the smallest grid item in the column.
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 using a custom length value. Read about length units
%	Sets the size of the columns using a percentage value.

CSS Reference: grid-auto-row Property