grid-auto-columns

A property that specifies the default column size(s) for a container.

Syntax

.grid-container {
display: grid;
grid-auto-columns: <col-value>;
}

where <col-value> can be one of the following:

  • Grid keyword: auto, maxcontent, minmax()
  • Pixel value: 300px
  • Percent value: 25%
  • Fractional unit value: 1fr

Example 1

A container divided into evenly spaced columns with a minimum width of 100 pixels:

.content-a-container {
display: grid;
grid-auto-columns: minmax(100px, auto);
}

Example 2

A container with columns that each constitute 10% of the available width:

.content-b-container {
display: grid;
grid-auto-columns: 10%;
}
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors