grid-template-rows

grid-template-rows defines the explicit row sizes and optional line names of a grid container. Rows added beyond that template use grid-auto-rows.

Divide a definite height

The grid has 180px of content height. After the 8px gap, the two flexible rows share 172px in a 1:2 ratio.

<div class="layout">
  <div>One share</div>
  <div>Two shares</div>
</div>

.layout {
  display: grid;
  height: 180px;
  grid-template-rows: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}
.layout > * {
  box-sizing: border-box;
}

A header above a scrollable panel

Auto lets the heading take its content height. Minmax(0,1fr) gives the remaining height to a region whose overflow is explicitly scrollable and keyboard reachable.

<section class="layout">
  <h2 id="notes-heading">Learning notes</h2>
  <div class="notes" tabindex="0" role="region" aria-labelledby="notes-heading">
    <p>Read the code.</p>
    <p>Change one value.</p>
    <p>Compare the result.</p>
    <p>Try a smaller width.</p>
    <p>Keep all text reachable.</p>
    <p>Explain the layout.</p>
  </div>
</section>

.layout {
  display: grid;
  height: 180px;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #94a3b8;
}
h2 {
  margin: 0;
  padding: 0.5rem;
  font-size: 1rem;
}
.notes {
  overflow: auto;
  padding: 0.5rem;
  background: #eff6ff;
}
.notes p {
  margin-block: 0.5rem;
}

Values and height conditions

The initial value is none and this property is not inherited. Track lists support lengths, percentages, fractions, intrinsic sizes, minmax(), repeat(), and named lines. None does not suppress implicit rows.

A definite grid height makes “remaining height” meaningful. In a content-sized grid, fractional rows are resolved using the content-based Grid sizing rules rather than dividing an unspecified viewport remainder. Percentages use the grid container’s block size; intrinsic sizing treats cyclic percentages differently.

Why the panel will not shrink

An automatic track minimum can preserve content height. An explicit zero minimum allows the track to shrink, but does not itself create a scrollbar. Add overflow, and verify keyboard and zoom behavior.

Subgrid through the column/row template needs separate compatibility checks. Learn grid-auto-rows for additional rows and grid-row for item placement.

Sources and browser support

MDN: grid-template-rows describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid specification defines track sizing, shorthand resets, and placement.