YouTip1
2
3
4
Css3 Pr Row Gap
## CSS `row-gap` Property
The `row-gap` CSS property sets the size of the gap (gutter) between an element's grid rows, flex lines, or multi-column rows.
---
## Quick Example
The following example sets a 50-pixel gap between the rows of a CSS Grid container:
```css
div {
display: grid;
row-gap: 50px;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :---: | :---: | :---: | :---: | :---: |
| **`row-gap` (in Grid Layout)** | 66 | 16 | 61 | 12.1 | 53 |
| **`row-gap` (in Flexbox)** | 84 | 84 | 63 | 14.1 | 70 |
---
## Property Definition and Usage
The `row-gap` property defines the spacing between rows in a layout.
* **Grid Layout:** It defines the gutter space between grid rows.
* **Flexbox Layout:** It defines the gutter space between flex lines (when `flex-wrap` is set to `wrap` or `wrap-reverse` and there are multiple lines).
* **Multi-column Layout:** It defines the gutter space between columns (though `column-gap` is more commonly used here).
> **Note:** In early CSS Grid specifications, this property was named `grid-row-gap`. It has since been renamed to `row-gap` to align with its usage across other layout models like Flexbox. Modern browsers support both, but you should always use `row-gap` for forward compatibility.
### Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value:** | `normal` |
| **Inherited:** | No |
| **CSS Version:** | CSS3 |
| **JavaScript Syntax:** | `object.style.rowGap = "40px"` |
---
## Syntax
```css
row-gap: length | percentage | normal | initial | inherit;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `length` | Specifies the gap size using explicit length units (e.g., `px`, `em`, `rem`, `vh`). Negative values are invalid. |
| `percentage` | Specifies the gap size as a percentage of the container's height. |
| `normal` | The default value. Represents a multi-column or browser-defined default gap (usually `0` for Flexbox and Grid). |
| `initial` | Sets this property to its default value (`normal`). |
| `inherit` | Inherits this property from its parent element. |
---
## Code Examples
### Example 1: CSS Grid Row Gap
This example demonstrates how to create a grid layout with a `20px` gap between rows and a `10px` gap between columns.
```html
```
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 20px;
column-gap: 10px;
background-color: #f1f1f1;
padding: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
}
```
### Example 2: Flexbox Row Gap
When using Flexbox with wrapping enabled, `row-gap` controls the vertical space between wrapped lines.
```css
.flex-container {
display: flex;
flex-wrap: wrap;
row-gap: 15px; /* Spacing between wrapped rows */
column-gap: 10px; /* Spacing between items in the same row */
}
```
---
## Related Articles
* CSS Tutorial: (/css/css_grid.html)
* CSS Reference: (/cssref/css3-pr-gap.html) Property
* CSS Reference: (/cssref/css3-pr-column-gap.html) Property