🎯 CSS grid-column-gap Property

The grid-column-gap property is used in CSS Grid Layout to define the horizontal spacing between columns.

By adjusting this value, you can control how much space appears between grid columns and create cleaner, more readable layouts.

Specifies the amount of space between columns using units such as px, rem, em, or percentages.

.container {
    grid-column-gap: 20px;
}
                

Creates a 20px horizontal gap between each grid column.

.container {
    grid-column-gap: 1rem;
}

.container {
    grid-column-gap: 5%;
}
                

Resets the property to its default browser value.

.container {
    grid-column-gap: initial;
}
                

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

In this example, the grid contains three equal-width columns with a 30px gap between each column.