CSS grid-auto-columns property

Definition and Usage

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

This property only affects columns that have not been set with a size.

See Also:

CSS Tutorial:CSS Grid Layout

CSS Reference Manual:grid-auto-rows attribute

Example

Set the default size for the columns in the grid:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
auto Default Value. The column size is determined by the container size.
fit-content()
max-content Set the size of each column based on the largest item in the column.
min-content Set the size of each column based on the smallest item in the column.
minmax(min.max) Set a size range greater than or equal to min and less than or equal to max.
length Set the column size by using valid length values. SeeLength Units.
% Set the column size by using percentage values.

Technical Details

Default Value: auto
Inheritance: No
Animation Creation: Supported. See:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridAutoColumns="120px"

Browser Support

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44