CSS Grid Gap

Written by Swapnil RajaUpdated 30 Jul 2026

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;
}

PreviousCSS Grid Rows NextCSS Grid Layout Example

.container {
    gap: 20px;
}

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;

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>

CSS Grid Gap

Syntax

Attributes

Example

Browser Support

Notes

Single Gap Value

Different Row and Column Gaps

Separate Properties

Conclusion