CSS Grid-Template-Rows: Master Row Track Sizing with Complete Examples

The grid-template-rows property is a fundamental building block of CSS Grid Layout that allows you to define the size of row tracks in your grid container. This powerful property gives you precise control over the height of each row, enabling you to create flexible and responsive layouts with ease.

Understanding CSS Grid-Template-Rows

The grid-template-rows property specifies the track sizes for the rows in a grid container. Each value in the property corresponds to a row track, defining its height. This property works in conjunction with grid-template-columns to create a complete grid layout structure.

Basic Syntax

.grid-container {
  display: grid;
  grid-template-rows: <track-size> <track-size> ...;
}

Track Size Values and Units

The grid-template-rows property accepts various types of values, each serving different layout purposes:

Fixed Units (px, em, rem)

Fixed units provide precise control over row heights, making them ideal for headers, footers, or any content with known dimensions.

.grid-container {
  display: grid;
  grid-template-rows: 60px 200px 40px;
  grid-template-columns: 1fr;
  gap: 10px;
}

Flexible Units (fr)

The fr unit represents a fraction of the available space in the grid container. It’s perfect for creating responsive layouts that adapt to different screen sizes.

.grid-container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  height: 300px;
  gap: 10px;
}

Auto Keyword

The auto keyword sizes tracks based on their content, making it ideal for rows with varying content heights.

.grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}

Advanced Sizing Functions

Minmax() Function

The minmax() function defines a size range with minimum and maximum values, providing flexibility while maintaining constraints.

.grid-container {
  display: grid;
  grid-template-rows: minmax(100px, auto) minmax(50px, 1fr) 60px;
  height: 350px;
  gap: 10px;
}

Repeat() Function

The repeat() function allows you to repeat track sizing patterns, reducing code repetition and improving maintainability.

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 80px);
  gap: 10px;
}

Practical Layout Examples

Holy Grail Layout

Create a classic web layout with header, main content, and footer using grid-template-rows.

.holy-grail {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr 150px;
  height: 100vh;
  gap: 10px;
}

.header, .footer {
  grid-column: 1 / -1;
}

Card Grid Layout

Design a responsive card grid where each row can accommodate different card heights.

.card-grid {
  display: grid;
  grid-template-rows: repeat(2, minmax(150px, auto));
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

Interactive Example

Try adjusting the row template values in this interactive example to see how different settings affect the layout:

.interactive-grid {
  display: grid;
  grid-template-rows: 100px 200px 100px;
  height: 400px;
  gap: 10px;
}

Browser Support and Fallbacks

CSS Grid has excellent browser support across modern browsers. However, for older browsers, consider providing fallbacks using flexbox or float-based layouts.

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

Common Pitfalls and Solutions

Overflow Issues

When using fixed heights, content might overflow. Use minmax() or auto to prevent this:

/* Instead of */
grid-template-rows: 100px 100px 100px;

/* Use */
grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);

Responsive Considerations

Combine grid-template-rows with media queries for responsive designs:

@media (max-width: 768px) {
  .grid-container {
    grid-template-rows: auto auto auto;
  }
}

@media (min-width: 769px) {
  .grid-container {
    grid-template-rows: 100px 1fr 80px;
  }
}

Performance Considerations

CSS Grid is highly optimized, but keep these performance tips in mind:

• Avoid excessive use of auto sizing in large grids as it requires content measurement
• Use fr units for better performance than percentage-based sizing
• Consider using subgrid for nested grid layouts (where supported)

Conclusion

The grid-template-rows property is essential for creating flexible, responsive layouts with CSS Grid. By understanding the different sizing options—from fixed units to flexible fractions and advanced functions like minmax() and repeat()—you can build sophisticated layouts that adapt to various content and screen sizes.

Master these concepts through practice, and you’ll find CSS Grid becomes an indispensable tool for modern web development. Remember to test your layouts across different devices and browsers to ensure consistent behavior and optimal user experience.