1. css
  2. /properties
  3. /grid-auto-columns

grid-auto-columns

Definition

The grid-auto-columns property is used to set the size of implicit grid columns that are created when a grid item is placed in a row that does not already have a set number of columns. The property specifies the default size for these columns.

Examples

Setting the size of implicit grid columns:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-columns: 50px;
}

Using the min-content keyword:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-columns: min-content;
}

Values

ValueDescription
<track-size>Specifies the default size for implicit grid columns. This can be a length value, a percentage, or the min-content, max-content, or auto keywords.

Best Practices

  • Use grid-auto-columns to set the default size of implicit grid columns, but be prepared to override this value for specific grid items if necessary.
  • Consider using the min-content or max-content keywords to size grid columns based on their content. This can help to ensure that your grid items are not unnecessarily constrained by their column sizes. = Avoid using percentage values for grid-auto-columns if possible, as these can be difficult to reason about and may lead to layout issues.
  • Use a consistent grid track sizing system across your layout to ensure that your grid items are aligned and sized consistently.
  • Use media queries to adjust the grid-auto-columns property for different screen sizes if necessary.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes