YouTip

# CSS grid-template-rows Property The `grid-template-rows` property in CSS Grid Layout defines the line names and track sizing functions of the grid's rows. Essentially, it allows you to specify the number of rows and their respective heights in a grid container. --- ## Quick Example The following example defines a grid container with two rows: the first row has a height of `100px`, and the second row has a height of `300px`. ```css .grid-container { display: grid; grid-template-rows: 100px 300px; } ``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports this property. | Property | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **grid-template-rows** | 57 | 16 | 52 | 10 | 44 | --- ## Property Definition and Usage The `grid-template-rows` property sets the number of rows and the height of each row in a grid layout. The value is specified as a space-separated list, where each value defines the height of the corresponding row (the first value for the first row, the second value for the second row, and so on). ### Specifications | Feature | Description | | :--- | :--- | | **Default Value:** | `none` | | **Inherited:** | No | | **Animatable:** | Yes (supports smooth transitions between track sizes) | | **CSS Version:** | CSS Grid Layout Module Level 1 | | **JavaScript Syntax:** | `object.style.gridTemplateRows = "50px 200px"` | --- ## Syntax ```css grid-template-rows: none | auto | max-content | min-content | length | initial | inherit; ``` ### Property Values | Value | Description | | :--- | :--- | | `none` | Default value. No explicit row tracks are created. Row sizes are determined implicitly by `grid-auto-rows`. | | `auto` | The size of the row is determined by the size of the container and the content of the items in that row. | | `max-content` | Sets the row height based on the largest maximum content contribution of the grid items in the row. | | `min-content` | Sets the row height based on the largest minimum content contribution of the grid items in the row. | | `length` | Defines the row height using standard CSS length units (e.g., `px`, `em`, `rem`, `vh`) or percentages (`%`). | | `initial` | Sets this property to its default value (`none`). | | `inherit` | Inherits this property from its parent element. | --- ## Code Examples and Common Patterns ### 1. Using Fixed and Flexible Units (`fr`) The fractional unit (`fr`) represents a fraction of the free space in the grid container. ```css .grid-container { display: grid; /* Three rows: 1st is 100px, 2nd and 3rd share the remaining space in a 1:2 ratio */ grid-template-rows: 100px 1fr 2fr; height: 600px; } ``` ### 2. Using the `repeat()` Function If you have multiple rows with the same height, you can use the `repeat()` function to keep your code clean. ```css .grid-container { display: grid; /* Creates 4 rows, each 150px tall */ grid-template-rows: repeat(4, 150px); } ``` ### 3. Using `minmax()` for Responsive Rows The `minmax()` function defines a size range greater than or equal to *min* and less than or equal to *max*. ```css .grid-container { display: grid; /* The row will be at least 100px tall, but can grow to fit content up to 300px */ grid-template-rows: minmax(100px, 300px); } ``` --- ## Related Articles - CSS Tutorial: (https://www.runoob.com/css/css-grid.html) - CSS Reference: (pr-grid-columns.html) - CSS Reference: (pr-grid-template.html)