🎯 CSS grid-gap Property

The grid-gap property is a CSS Grid shorthand used to define spacing between both rows and columns in a single declaration.

It allows developers to control vertical and horizontal spacing at the same time, making grid layouts more compact and easier to manage.

The grid-gap shorthand combines two properties:

• grid-row-gap → vertical spacing between rows
• grid-column-gap → horizontal spacing between columns

Defines spacing using units such as px, rem, em, or percentages.

.container {
    grid-gap: 20px; /* equal spacing for rows and columns */
}
                

This sets equal spacing between both rows and columns.

.container {
    grid-gap: 10px 30px; /* row-gap | column-gap */
}
                

The first value defines row spacing, and the second value defines column spacing.

Resets the property to its default browser value.

.container {
    grid-gap: initial;
}
                

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
                

In this example, the grid layout has equal spacing between all rows and columns.