YouTip1
2
3
Pr Grid Column Gap
# CSS grid-column-gap Property
The `grid-column-gap` property defines the size of the gap (gutter) between the columns in a CSS grid layout.
---
## Quick Example
Set the gap between columns to `50px`:
```css
.grid-container {
display: grid;
grid-column-gap: 50px;
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports this property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :---: | :---: | :---: | :---: | :---: |
| **grid-column-gap** | 57 | 16 | 52 | 10 | 44 |
---
## Property Definition and Usage
The `grid-column-gap` property sets the width of the empty space between grid columns.
> **Note:** In modern CSS specifications, this property has been renamed to simply `column-gap`. The `grid-column-gap` property is now maintained as an alias for backwards compatibility. For modern web development, it is recommended to use `column-gap`.
### Technical Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value:** | `0` |
| **Inherited:** | No |
| **Animatable:** | Yes |
| **CSS Version:** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax:** | `object.style.gridColumnGap = "50px"` |
---
## Syntax
```css
grid-column-gap: length;
```
### Property Values
| Value | Description |
| :--- | :--- |
| *length* | A non-negative length value (e.g., `px`, `em`, `rem`) or a percentage `%` representing the width of the gap. `0` is the default value. |
---
## Code Examples
### Example 1: Basic Column Gap
This example sets a `20px` gap between columns in a three-column grid layout.
```html
```
```css
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 20px; /* Gap between columns */
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
```
### Example 2: Using Percentage Values
You can also use percentage values to create responsive gaps that scale with the container's width.
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 5%; /* Gap is 5% of the grid container's width */
}
```
---
## Important Considerations
1. **Modern Standard (`column-gap`):** While `grid-column-gap` is still supported by all major browsers for legacy reasons, you should use `column-gap` in new projects.
2. **Only Between Columns:** The gap is only placed *between* columns, not on the outer edges of the grid container.
3. **Grid vs. Flexbox:** Originally part of the CSS Grid specification, the renamed `column-gap` property can now also be used in Multi-column and Flexbox layouts.
---
## Related Articles
- CSS Tutorial: (https://www.runoob.com/css/css-grid.html)
- CSS Reference: (pr-grid-gap.html)
- CSS Reference: (pr-grid-row-gap.html)