CSS grid-auto-columns Property

❮ Previous Reference Next ❯


.grid-container {
  display: grid;
  grid-auto-columns: 1fr;

Hello World!


The grid-auto-columns property specifies the size of an implicitly-created grid column track or pattern of tracks.

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

Default value:auto
Version:CSS Grid Layout Module Level 1
JavaScript syntax:

Standard Syntax

grid-auto-columns: auto|fit-content(length|%)|flex|max-content|min-content|length|initial|inherite|revert|revert-layer|unset;

Browser Support

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


Property Values

The following table describes the values of this property.

Value Description
auto This is default value. The size of the columns is determined by the size of the container
fit-content(length|%) Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.
flex Is a non-negative dimension with the unit fr specifying the track's flex factor.
max-content Specifies that the size of each column depending on the largest item in the column.
min-content Specifies that the size of each column depending on the smallest item in the column.
minmax(min.max) Specifies that a size range greater than or equal to min and less than or equal to max.
length Specifies that the size of the columns, by using a legal length value.
%(percentage) Specifies that the size of the columns, by using a percent value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  grid-auto-columns: auto;

More Example



.grid-container {
  display: grid;
  grid-template-columns: 50px;
  grid-auto-columns: 75px 2fr 300px;
  grid-auto-flow: column;
❮ Previous Reference Next ❯