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

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

ValueDescription
<track-size>Specifies a fixed height for implicit rows.
min-contentSets the height of the row to the minimum content size of its grid items.
max-contentSets the height of the row to the maximum content size of its grid items.
autoThe default value, which sizes rows based on their content and available space.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYes11 and higherYesYes