grid-template-rows

Definition

The grid-template-rows CSS property is used in grid layouts to define the size and number of rows in a grid container.

The grid-template-rows property accepts a list of values that represent the height of each row. You can specify the height using length values (e.g., pixels or percentages), fractional units (e.g., fr), or the auto keyword. Additionally, you can use the repeat() function to specify a repeated pattern of row sizes.

Here’s an example:

.grid-container {
  display: grid;
  grid-template-rows: 100px 1fr 200px;
}

In this example, the grid-template-rows: 100px 1fr 200px; rule sets up a grid layout with three rows. The first row has a height of 100px, the second row takes up the remaining available space with a 1fr unit, and the third row has a fixed height of 200px.

Using grid-template-rows, you can create flexible and responsive grid layouts, defining the height of each row based on your design requirements. It allows for the creation of grid structures that adapt to different screen sizes and content heights.

Syntax

.schedule {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Values

• List of track sizes using lengths, fr, auto, or minmax()

Practical Examples

.schedule {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 24rem;
  gap: 1rem;

Establish header, content, and footer rows in a single declaration.

<div class="grid min-h-[18rem] gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm" style="display:grid; grid-template-rows:auto 1fr auto;">
  <header class="rounded-lg bg-slate-100 p-3 text-sm font-semibold text-slate-700">Header</header>
  <section class="rounded-lg bg-slate-50 p-3 text-sm text-slate-700">Scrollable content</section>
  <footer class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Footer</footer>
</div>

Tips & Best Practices

• Use minmax() to prevent rows from collapsing when content grows.
• Combine with grid-auto-rows to size implicit rows consistently.

Accessibility & UX Notes

Consistent row heights help users compare data quickly.

Browser Support

Supported broadly.

Related

• grid-template-columns
• grid-auto-rows
• grid-template.