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. The supporting concepts are explained in CSS Grid Columns and CSS Grid Rows.

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
gap in Grid	66	16	61	12

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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