CSS Grid `grid-template-rows` Overview

Overview

This lecture covers the CSS grid-template-rows property, which defines how rows are sized and named in a CSS Grid layout.

Purpose and Usage

• grid-template-rows sets the line names and track sizing for the grid rows.
• Used only on elements with display: grid or display: inline-grid.
• It applies to grid containers and does not inherit.

Syntax and Examples

• Basic syntax: grid-template-rows: <track-list> | <auto-track-list> | subgrid | none;
• Example values: auto, 40px 4em 40px, 1fr 2fr 1fr, repeat(3, 200px).
• Example: grid-template-rows: 30px 1fr; creates two rows, one 30px and the other filling remaining space.

Value Types and Functions

• none: No explicit grid; rows are created implicitly.
• <length>: Sets row height in px, em, etc.
• <percentage>: Relative to grid container’s block size.
• <flex> (fr): Distributes remaining space proportionally.
• min-content/max-content: Adapts to minimum/maximum content size.
• minmax(min,max): Defines a size range for a row.
• auto: Row adapts between minimum and maximum item size.
• fit-content(<length>|<percentage>): Clamped size based on content, but limited by argument.
• repeat(count, value): Repeats a track definition; auto-fill/auto-fit adjust number of rows automatically.
• subgrid: Adopts row sizing from the parent grid.
• masonry: Uses masonry algorithm for row layout.

Formal Details

• Initial value is none.
• Percentages reference the grid container size.
• Computed value resolves to absolute lengths.
• Animation type is a simple list of possible length, percent, or calc values.

Example Implementation

• In CSS: #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; }

Key Terms & Definitions

• Grid Container — An element with display: grid or inline-grid, hosting grid items.
• Track — A row or column in a grid.
• fr unit — Fractional unit for distributing space in grids.
• min-content / max-content — Keywords for respective minimum/maximum space required by content.
• subgrid — Allows child grid to inherit grid lines from its parent.
• repeat() — Function to create repeated row/column patterns.

Action Items / Next Steps

• Practice defining grid layouts using grid-template-rows with various value types.
• Review differences among length, percentage, fr units, and functions like minmax().
• Try examples with repeat(), subgrid, and auto values to see their effects on grid layouts.