YouTip1
2
3
4
5
6
Pr Grid Gap
# CSS grid-gap Property
The `grid-gap` property is a shorthand CSS property used to set the size of the gaps (gutters) between rows and columns in a grid layout.
---
## Quick Example
Set both the row and column gaps to `50px`:
```css
.grid-container {
display: grid;
grid-gap: 50px;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-gap` property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **grid-gap** | 57 | 16 | 52 | 10 | 44 |
---
## Property Definition and Usage
The `grid-gap` property defines the spacing between grid items. It is a shorthand property for:
* `grid-row-gap` (defines the gap between rows)
* `grid-column-gap` (defines the gap between columns)
> **Note:** In modern CSS Grid specifications, the `grid-` prefix has been deprecated. The standard properties are now simply `gap`, `row-gap`, and `column-gap`. However, `grid-gap` remains supported in modern browsers for backwards compatibility.
### Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value** | `0 0` |
| **Inherited** | No |
| **Animatable** | Yes (supports smooth transitions between gap sizes) |
| **CSS Version** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax** | `object.style.gridGap = "50px 100px"` |
---
## Syntax
```css
grid-gap: grid-row-gap grid-column-gap;
```
### Value Descriptions
| Value | Description |
| :--- | :--- |
| **`grid-row-gap`** | Specifies the size of the gap between grid rows. Default is `0`. |
| **`grid-column-gap`** | Specifies the size of the gap between grid columns. Default is `0`. |
* **One value specified:** If only one value is provided (e.g., `grid-gap: 20px;`), it applies to **both** rows and columns.
* **Two values specified:** If two values are provided (e.g., `grid-gap: 20px 50px;`), the first value sets the row gap, and the second value sets the column gap.
---
## Code Examples
### Example 1: Setting Different Row and Column Gaps
The following example sets the gap between grid rows to `20px` and the gap between grid columns to `50px`:
```css
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px 50px;
}
```
### Example 2: Complete HTML/CSS Implementation
Here is a complete example showing how to apply `grid-gap` to a container:
```html
```
---
## Considerations & Best Practices
1. **Modern Standard (`gap`):** While `grid-gap` is widely supported, the modern CSS standard recommends using the prefix-free **`gap`** property. `gap` works identically to `grid-gap` but also supports Flexbox and Multi-column layouts.
2. **Outer Margins:** The `grid-gap` property only adds spacing *between* the grid items. It does not add spacing between the items and the outer border of the grid container. To add space around the entire grid, use the `padding` property on the container.
3. **Acceptable Units:** You can define gaps using any standard CSS length units (e.g., `px`, `em`, `rem`, `%`, `vh`, `vw`).
---
## Related Articles
* CSS Tutorial: (/css/css-grid.html)
* CSS Reference: (pr-grid-row-gap.html)
* CSS Reference: (pr-grid-column-gap.html)