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

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