grid-auto-rows

Definition

The grid-auto-rows property is used to specify the size of rows that are created implicitly in a CSS grid layout when they are not defined explicitly in the grid-template-rows property. This property sets the size of rows that are added to the grid automatically when more rows are needed to contain grid items.

Examples

Setting a fixed row height:

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

Using the min-content value:

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

Using the max-content value

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
}

Values

Best Practices

• Use grid-auto-rows to set a default size for implicitly created rows in your grid layout.
• Consider using the min-content and max-content values to size your rows based on their content, which can help ensure that your layout is responsive and accessible.
• Use grid-template-rows to define specific row sizes for your grid, and use grid-auto-rows to set a default size for any additional rows that are created.
• Use px, em, or rem units for fixed row sizes, and use percentages for relative sizes that depend on the size of the grid container.
• Test your layout in different screen sizes and devices to ensure that your rows are sized appropriately and that your content remains accessible.

Browser Compatibility