CSS Grid

CSS Grid Gap

The CSS Grid Gap property is used to create space between grid rows and columns.

Without gaps, grid items appear directly next to each other. The gap property improves readability and layout design by adding spacing between grid items.

CSS Grid provides three related properties:

gap
row-gap
column-gap

These properties help create clean and professional-looking grid layouts.

Syntax

Using Gap

Gap Syntax

css

.container {
    gap: value;
}

Gap Example

css

.container {
    gap: 20px;
}

Adds 20px spacing between all rows and columns.

Using Row Gap

Row Gap Example

css

.container {
    row-gap: 20px;
}

Adds vertical spacing only.

Using Column Gap

Column Gap Example

css

.container {
    column-gap: 30px;
}

Adds horizontal spacing only.

Attributes

Property	Description	Example
gap	Sets spacing for rows and columns	gap: 20px;
row-gap	Sets spacing between rows	row-gap: 15px;
column-gap	Sets spacing between columns	column-gap: 25px;
gap	Multiple values	gap: 10px 20px;
inherit	Inherits gap from parent	gap: inherit;

Example

CSS Grid Gap Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Gap Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            border: 2px solid black;
            padding: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Output

Browser Output

css

The grid will display spacing between all items:

Item1     Item2     Item3

Item4     Item5     Item6

Each grid item will have 20px spacing around neighboring items
Rows and columns will appear neatly separated
The layout will be easier to read and maintain

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	No

Notes

gap is the preferred modern property.
gap: 20px; applies spacing to both rows and columns.
gap: 10px 20px; means row gap = 10px and column gap = 20px.
Works in both CSS Grid and Flexbox.
Makes layouts cleaner than using margins on individual items.

Single Gap Value

css

gap: 20px;

Equal spacing everywhere.

Different Row and Column Gaps

css

gap: 15px 30px;

15px row gap
30px column gap

Separate Properties

Separate Properties Example

css

row-gap: 20px;
column-gap: 40px;

Conclusion

The CSS Grid Gap property provides a simple and efficient way to add spacing between grid items. By using gap, row-gap, and column-gap, you can create cleaner, more organized, and visually appealing grid layouts without adding extra margins to individual elements.

PreviousCSS Grid Rows NextCSS Grid Layout Example