YouTipPr Grid Row
# CSS grid-row Property
The `grid-row` CSS property is a shorthand property that defines a grid item's size and location within a grid layout by specifying its start and end positions along the row axis (vertical placement).
By using `grid-row`, you can easily control where an item begins, where it ends, or how many rows it should span.
---
## Quick Example
The following example configures `.item1` to start at row line 1 and span across 2 rows:
```css
.item1 {
grid-row: 1 / span 2;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-row` property:
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :---: | :---: | :---: | :---: | :---: |
| **grid-row** | 57 | 16 | 52 | 10 | 44 |
---
## Property Definition and Usage
* The `grid-row` property determines a grid item's placement in a grid by specifying its start and end lines.
* **Note:** `grid-row` is a shorthand property for the following individual properties:
* `grid-row-start`
* `grid-row-end`
* You can position grid items by referencing specific grid line numbers, or you can use the `span` keyword to define how many rows the item should occupy.
### Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value** | `auto` |
| **Inherited** | No |
| **Animatable** | Yes (supports discrete animation) |
| **CSS Version** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax** | `object.style.gridRow = "2 / span 2"` |
---
## Syntax
```css
grid-row: grid-row-start / grid-row-end;
```
### Values
| Value | Description |
| :--- | :--- |
| **`grid-row-start`** | Specifies the row line where the grid item starts. |
| **`grid-row-end`** | Specifies the row line where the grid item ends, or how many rows to span. |
*Note: The start and end values are separated by a forward slash (`/`).*
---
## Code Examples
### Example 1: Positioning with Start and End Lines
The following example positions `.item1` starting at row line 1 and ending before row line 4 (occupying 3 rows in total):
```css
.item1 {
grid-row: 1 / 4;
}
```
### Example 2: Spanning Rows
You can use the `span` keyword to specify how many rows an item should cover without defining an explicit ending line. The following code starts the item at row line 2 and spans it across 3 rows:
```css
.item2 {
grid-row: 2 / span 3;
}
```
### Example 3: Single Value Shorthand
If only one value is provided, it sets `grid-row-start`. The `grid-row-end` value defaults to `auto` (which spans 1 row by default):
```css
.item3 {
grid-row: 2; /* Starts at row line 2 and spans 1 row */
}
```
---
## Considerations & Best Practices
1. **Grid Lines vs. Grid Tracks:** Grid lines are the dividing lines that make up the grid structure. They are numbered starting from `1`. Row line `1` is the very top edge of the grid.
2. **Negative Numbers:** You can use negative numbers to reference grid lines starting from the bottom edge. For example, `-1` represents the last row line of the grid, which is highly useful for spanning an item to the very bottom of the container:
```css
.sidebar {
grid-row: 1 / -1; /* Spans from the very top to the very bottom */
}
```
3. **Implicit vs. Explicit Grid:** If you position an item beyond the defined grid rows, CSS Grid will automatically create implicit rows to accommodate the item.
---
## Related Articles
* CSS Tutorial: (https://www.runoob.com/css/css-grid.html)
* CSS Reference: (pr-grid-row-start.html)
* CSS Reference: (pr-grid-row-end.html)