CSS 23 💻 row-gap, column-gap and gap properties - KandZ

These properties control the spacing between grid tracks (rows and columns). They’re essential for creating clean, well-spaced grid layouts without using margins on individual items.

Overview of Properties

Property	Description
`row-gap`	Space between rows
`column-gap`	Space between columns
`gap`	Shorthand for `row-gap` and `column-gap`

1. row-gap

The row-gap property specifies the space between each row in a grid.

.grid-container {
    display: grid;
    row-gap: 20px; /* 20px between each row */
}

Values

Value	Description	Example
`length`	Fixed size (px, em, rem)	`row-gap: 20px;`
`percentage`	Percentage of container	`row-gap: 5%;`
`calc()`	Calculated value	`row-gap: calc(10px + 2%);`
`normal`	Browser default (usually 0)	`row-gap: normal;`

2. column-gap

The column-gap property specifies the space between each column in a grid.

.grid-container {
    display: grid;
    column-gap: 10px; /* 10px between each column */
}

Values

Same as row-gap: length, percentage, calc(), normal

3. gap (Shorthand)

The gap property is a shorthand for row-gap and column-gap. It also applies to flex containers.

/* Both rows and columns */
.grid-container {
    gap: 20px; /* 20px for both row and column gaps */
}

/* Row gap | Column gap */
.grid-container {
    gap: 20px 10px; /* 20px row gap, 10px column gap */
}

Syntax

gap: <row-gap> <column-gap>;
gap: <row-gap>;  /* Same for both */

How It Works

┌─────────┐  ← row-gap
│  Item   │
├─────────┤  ← row-gap
│  Item   │
└─────────┘

┌────┬────┬────┐
│    │    │    │
│ It │ It │ It │  ← column-gap between columns
│    │    │    │
└────┴────┴────┘

row-gap creates vertical space between rows
column-gap creates horizontal space between columns
gap combines both

gap in Flexbox

The gap property also works in flex containers, making it easier to space flex items without margins.

.flex-container {
    display: flex;
    gap: 20px; /* 20px between flex items */
}

Before gap (using margins):

.flex-item {
    margin-right: 20px;
}
.flex-item:last-child {
    margin-right: 0;
}

With gap:

.flex-container {
    display: flex;
    gap: 20px; /* Much cleaner! */
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>row-gap, column-gap, and gap Properties</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }

        .highlight {
            background: #ffc107;
            color: #333;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ====== GRID DEMOS ====== */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
        }

        .grid-item {
            background: #007bff;
            color: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
        }

        .grid-item:nth-child(even) {
            background: #28a745;
        }

        .grid-item:nth-child(3n) {
            background: #dc3545;
        }

        /* Gap variations */
        .gap-both {
            gap: 20px;
        }

        .gap-different {
            row-gap: 30px;
            column-gap: 10px;
        }

        .gap-shorthand {
            gap: 30px 10px;
        }

        .gap-percentage {
            gap: 5%;
        }

        .gap-calc {
            gap: calc(10px + 2%);
        }

        /* Flexbox with gap */
        .flex-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
        }

        .flex-item {
            background: #6c5ce7;
            color: white;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
            flex: 1;
            min-width: 150px;
        }

        /* Visual gap indicators */
        .gap-visual {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .gap-visual-item {
            text-align: center;
        }

        .gap-visual-item .box {
            width: 100px;
            height: 60px;
            background: #007bff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .gap-visual-item .arrow {
            font-size: 1.5rem;
            color: #dc3545;
            margin: 5px 0;
        }
    </style>
</head>
<body>

    <h1>row-gap, column-gap, and gap Properties</h1>

    <!-- ====== 1. ROW-GAP ====== -->
    <section>
        <h2>1. row-gap</h2>
        <p>Specifies the space between <strong>rows</strong> in a grid.</p>

        <div class="grid-container" style="row-gap: 20px;">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
            <div class="grid-item">10</div>
        </div>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                row-gap: 20px;  /* 20px between rows */
            }
        </div>
    </section>

    <!-- ====== 2. COLUMN-GAP ====== -->
    <section>
        <h2>2. column-gap</h2>
        <p>Specifies the space between <strong>columns</strong> in a grid.</p>

        <div class="grid-container" style="column-gap: 30px;">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
            <div class="grid-item">10</div>
        </div>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                column-gap: 30px;  /* 30px between columns */
            }
        </div>
    </section>

    <!-- ====== 3. GAP (SHORTHAND) ====== -->
    <section>
        <h2>3. gap (Shorthand)</h2>
        <p>Sets both row and column gaps in one declaration.</p>

        <h3>gap: 20px (same for both)</h3>
        <div class="grid-container gap-both">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
            <div class="grid-item">10</div>
        </div>

        <h3>gap: 30px 10px (row gap | column gap)</h3>
        <div class="grid-container gap-shorthand">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
            <div class="grid-item">10</div>
        </div>

        <div class="code-block">
            /* Same for both */
            gap: 20px;

            /* Row gap | Column gap */
            gap: 30px 10px;

            /* Equivalent to: */
            row-gap: 30px;
            column-gap: 10px;
        </div>
    </section>

    <!-- ====== 4. GAP IN FLEXBOX ====== -->
    <section>
        <h2>4. gap in Flexbox</h2>
        <p>The <code>gap</code> property also works in <strong>flex containers</strong>, eliminating the need for margins.</p>

        <div class="flex-container">
            <div class="flex-item">Flex Item 1</div>
            <div class="flex-item">Flex Item 2</div>
            <div class="flex-item">Flex Item 3</div>
            <div class="flex-item">Flex Item 4</div>
            <div class="flex-item">Flex Item 5</div>
        </div>

        <div class="code-block">
            /* Flexbox with gap */
            .flex-container {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;  /* Space between items */
            }

            /* Before gap, you needed margins: */
            .flex-item {
                margin-right: 20px;
            }
            .flex-item:last-child {
                margin-right: 0;
            }
        </div>
    </section>

    <!-- ====== 5. VISUAL COMPARISON ====== -->
    <section>
        <h2>5. Visual Comparison</h2>

        <h3>row-gap vs column-gap</h3>
        <div class="gap-visual">
            <div class="gap-visual-item">
                <div class="box">Item 1</div>
                <div class="arrow">↕</div>
                <div class="box">Item 2</div>
                <div class="arrow">↕</div>
                <div class="box">Item 3</div>
                <p class="note">row-gap</p>
            </div>

            <div class="gap-visual-item" style="display: flex; gap: 20px; align-items: center;">
                <div class="box">Item 1</div>
                <div class="arrow" style="transform: rotate(90deg);">↔</div>
                <div class="box">Item 2</div>
                <div class="arrow" style="transform: rotate(90deg);">↔</div>
                <div class="box">Item 3</div>
                <p class="note">column-gap</p>
            </div>
        </div>
    </section>

    <!-- ====== 6. ADVANCED VALUES ====== -->
    <section>
        <h2>6. Advanced Values</h2>

        <h3>Percentage Gap</h3>
        <div class="grid-container" style="gap: 5%;">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
        </div>

        <h3>calc() Gap</h3>
        <div class="grid-container" style="gap: calc(10px + 2%);">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
        </div>

        <div class="code-block">
            /* Percentage gap */
            gap: 5%;

            /* calc() gap */
            gap: calc(10px + 2%);

            /* Different row and column gaps */
            gap: 30px 10px;
        </div>
    </section>

    <!-- ====== 7. REFERENCE TABLES ====== -->
    <section>
        <h2>7. Reference Tables</h2>

        <h3>Gap Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>row-gap</code></td>
                <td>Space between rows</td>
                <td><code>row-gap: 20px;</code></td>
            </tr>
            <tr>
                <td><code>column-gap</code></td>
                <td>Space between columns</td>
                <td><code>column-gap: 10px;</code></td>
            </tr>
            <tr>
                <td><code>gap</code></td>
                <td>Shorthand for both</td>
                <td><code>gap: 20px 10px;</code></td>
            </tr>
        </table>

        <h3>Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>length</code></td>
                <td>Fixed size (px, em, rem)</td>
                <td><code>gap: 20px;</code></td>
            </tr>
            <tr>
                <td><code>percentage</code></td>
                <td>Percentage of container</td>
                <td><code>gap: 5%;</code></td>
            </tr>
            <tr>
                <td><code>calc()</code></td>
                <td>Calculated value</td>
                <td><code>gap: calc(10px + 2%);</code></td>
            </tr>
            <tr>
                <td><code>normal</code></td>
                <td>Browser default (usually 0)</td>
                <td><code>gap: normal;</code></td>
            </tr>
        </table>

        <h3>gap Shorthand</h3>
        <table class="reference-table">
            <tr>
                <th>Syntax</th>
                <th>Row Gap</th>
                <th>Column Gap</th>
            </tr>
            <tr>
                <td><code>gap: 20px;</code></td>
                <td>20px</td>
                <td>20px</td>
            </tr>
            <tr>
                <td><code>gap: 30px 10px;</code></td>
                <td>30px</td>
                <td>10px</td>
            </tr>
        </table>
    </section>

    <!-- ====== 8. BEST PRACTICES ====== -->
    <section>
        <h2>8. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>gap</code> instead of margins on grid/flex items</li>
                <li>Use <code>gap</code> for consistent spacing in both grid and flexbox</li>
                <li>Use <code>row-gap</code> and <code>column-gap</code> for different spacing</li>
                <li>Use percentage or <code>calc()</code> gaps for responsive spacing</li>
                <li>Use <code>gap</code> to simplify your code — no more <code>:last-child</code> margin resets!</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't use margins on grid items — use <code>gap</code> instead</li>
                <li>Don't forget that <code>gap</code> creates space <strong>between</strong> tracks, not around them</li>
                <li>Don't use <code>gap</code> on elements that aren't grid or flex containers</li>
                <li>Don't mix <code>gap</code> and margins unnecessarily — choose one approach</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Description	Example
`row-gap`	Space between rows	`row-gap: 20px;`
`column-gap`	Space between columns	`column-gap: 10px;`
`gap`	Shorthand for both	`gap: 20px 10px;`

Values

Value	Description	Example
`length`	Fixed size (px, em, rem)	`gap: 20px;`
`percentage`	Percentage of container	`gap: 5%;`
`calc()`	Calculated value	`gap: calc(10px + 2%);`
`normal`	Browser default (usually 0)	`gap: normal;`

gap Shorthand

Syntax	Row Gap	Column Gap
`gap: 20px;`	20px	20px
`gap: 30px 10px;`	30px	10px

Best Practices

✅ Do This:

/* Grid with gap */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Much cleaner than margins! */
}

/* Flexbox with gap */
.flex {
    display: flex;
    gap: 15px;
}

/* Different row and column gaps */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 10px; /* 30px rows, 10px columns */
}

❌ Don’t Do This:

/* Don't use margins on grid items */
.grid-item {
    margin: 10px; /* Use gap on the container instead */
}

/* Don't forget gap only works on grid/flex containers */
p {
    gap: 20px; /* Won't work — p is not a grid or flex container */
}

Pro Tip: The gap property is one of the best additions to CSS in recent years. It works in both Grid and Flexbox, eliminating the need for margin-based spacing hacks. Use gap on your grid and flex containers instead of margins on individual items — your code will be cleaner, more maintainable, and easier to reason about. Remember: gap creates space between tracks, not around the outer edges!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Properties

1. row-gap

Values

2. column-gap

Values

3. gap (Shorthand)

Syntax

How It Works

gap in Flexbox

Complete Example

Quick Reference

Values

gap Shorthand

Best Practices

Ads Blocker Detected!!!