grid-auto-rows

Definition

The grid-auto-rows CSS property is used in grid layouts to set the height of implicitly created rows when the grid items do not explicitly specify their own row heights.

The grid-auto-rows property accepts a value or a series of values, such as length values (e.g., 200px, auto), percentage values (e.g., 50%), or minmax() functions (e.g., minmax(100px, 1fr)).

Here’s an example:

.grid-container {
  display: grid;
  grid-auto-rows: 100px;
}

In this example, the grid-auto-rows: 100px; rule sets the height of implicitly created rows in a grid container to 100 pixels. When grid items do not explicitly specify their own row heights, these rows will be automatically created with a height of 100 pixels.

The grid-auto-rows property allows for control over the sizing of implicitly created rows in grid layouts, ensuring consistent row heights and helping to achieve the desired grid structure.

Syntax

.pricing {
  display: grid;
  grid-auto-rows: minmax(6rem, auto);
}

Values

auto (default).
<length> / <percentage> / minmax() to size implicit rows.

Practical Examples

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  grid-auto-rows: minmax(8rem, auto);
  gap: 1rem;

Set a baseline height for rows introduced by auto-placement.

HTML

Plan Starter

Plan Pro

Plan Teams

Code

<div class="grid gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="display:grid; grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); grid-auto-rows:minmax(8rem,auto); gap:1rem;">
  <div class="rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Plan Starter</div>
  <div class="rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Plan Pro</div>
  <div class="rounded-lg bg-slate-100 p-4 text-sm text-slate-700">Plan Teams</div>
</div>

Tips & Best Practices

Use minmax() so rows expand with content but stay consistent.
Combine with align-content: start to avoid gaps at the bottom.

Accessibility & UX Notes

Consistent row heights keep pricing cards aligned for comparison.

Browser Support

Supported in modern browsers.

grid-auto-columns, grid-auto-flow.
grid-template-rows for explicit sizing.