grid-auto-columns

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

Syntax

The grid-auto-columns property only affects columns that do not have a set size.

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

Values

auto
Default value. The columns’ sizes are determined by the size of the largest item in the container.

max-content
The largest item in the column sets the size of each column.

min-content
The smallest item in the column sets the size of each column.

minmax(min.max)
Sets a range of size that is greater than or equal to min and less than or equal to max.

length
Designates the size of the columns in px, cm, em, rem, etc.

%
Designates the size of the columns in percentage.

Browser Compatibilty

Demos

Have a code example of grid-auto-columns? Submit a codepen.io demo and we'll showcase it here ↴