CSS grid-auto-columnsProperty
Example
Set the default size of columns in the grid::
.grid-container {
display: grid;
grid-auto-columns: 50px;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| grid-auto-columns | 57 | 16 | 52 | 10 | 44 |
Property definition and usage instructions
The grid-auto-columns property is used to set the default size of columns in a grid container.
This property only affects columns without a set size.
| Default Value: | auto |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| Version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridAutoColumns="120px" Try it Yourself |
Syntax
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 toformula min(max-content, max(auto, argument)), class似inauto ofCompute(i.e. minmax(auto, max-content)) |
| max-content | Sets the size of each column based on the largest grid element in the column. |
| min-content | Sets the size of each column based on the smallest grid element in the column. |
| minmax(min.max) | Sets the size to 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 |
| % | Use percentage values to set the size of columns |
Related Articles
CSS Tutorial:CSS Grid Layout
CSS Reference Manual:grid-auto-rowProperty
other extensions