CSS 21 💻 grid-row-start, grid-column-start, grid-row-end and grid-column-end properties - KandZ

These four properties give you precise control over where grid items are placed and how many tracks they span. They are the individual longhand properties that grid-area and grid-row/grid-column shorthand properties are based on.

Overview of Properties

Property	Description
`grid-row-start`	Specifies where a grid item starts within a row
`grid-row-end`	Specifies where a grid item ends within a row
`grid-column-start`	Specifies where a grid item starts within a column
`grid-column-end`	Specifies where a grid item ends within a column

1. grid-row-start

Specifies the starting row line for a grid item.

.first-item {
    grid-row-start: 1; /* Starts at row line 1 */
}

Values

Value	Description	Example
`auto`	Next available row (default)	`grid-row-start: auto;`
`integer`	Specific row line number	`grid-row-start: 2;`
`span #n`	Spans n rows from the start	`grid-row-start: span 2;`

2. grid-row-end

Specifies the ending row line for a grid item.

.first-item {
    grid-row-start: 1;
    grid-row-end: 3; /* Ends at row line 3 (spans rows 1 and 2) */
}

Values

Value	Description	Example
`auto`	Next available row (default)	`grid-row-end: auto;`
`integer`	Specific row line number	`grid-row-end: 4;`
`span #n`	Spans n rows from the start	`grid-row-end: span 2;`

Important: The end line is exclusive — grid-row-end: 3 means the item ends before line 3 (i.e., it occupies rows 1 and 2).

3. grid-column-start

Specifies the starting column line for a grid item.

.second-item {
    grid-column-start: 2; /* Starts at column line 2 */
}

Values

Value	Description	Example
`auto`	Next available column (default)	`grid-column-start: auto;`
`integer`	Specific column line number	`grid-column-start: 3;`
`span #n`	Spans n columns from the start	`grid-column-start: span 2;`

4. grid-column-end

Specifies the ending column line for a grid item.

.second-item {
    grid-column-start: 2;
    grid-column-end: 4; /* Ends at column line 4 (spans columns 2 and 3) */
}

Values

Value	Description	Example
`auto`	Next available column (default)	`grid-column-end: auto;`
`integer`	Specific column line number	`grid-column-end: 4;`
`span #n`	Spans n columns from the start	`grid-column-end: span 2;`

Visualizing Grid Lines

In a 3×2 grid, there are 4 column lines and 3 row lines:

Column Lines:  1        2        3        4
              │        │        │        │
Row Line 1 ───┼────────┼────────┼────────┤
              │ Cell 1 │ Cell 2 │ Cell 3 │
Row Line 2 ───┼────────┼────────┼────────┤
              │ Cell 4 │ Cell 5 │ Cell 6 │
Row Line 3 ───┴────────┴────────┴────────┘

A cell that starts at row line 1 and ends at row line 2 occupies 1 row
A cell that starts at row line 1 and ends at row line 3 occupies 2 rows

Using `span`

Instead of specifying the end line, you can use span to indicate how many tracks the item should cover.

/* These two are equivalent */
.item {
    grid-row-start: 1;
    grid-row-end: 3;
}

.item {
    grid-row-start: 1;
    grid-row-end: span 2; /* Spans 2 rows from row line 1 */
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-row-start, grid-column-start, grid-row-end, grid-column-end</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(3, 100px);
            grid-template-rows: repeat(2, 100px);
            gap: 5px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            width: fit-content;
        }

        .cell {
            border: 2px solid #333;
            padding: 10px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: bold;
            font-size: 0.85rem;
            background: #007bff;
            color: white;
        }

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

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

        /* Demo 1: grid-row-start / grid-row-end */
        .grid-rows {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            width: fit-content;
        }

        .grid-rows .span-2-rows {
            grid-row-start: 1;
            grid-row-end: 3;
            background: #6c5ce7;
        }

        /* Demo 2: grid-column-start / grid-column-end */
        .grid-columns {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            width: fit-content;
        }

        .grid-columns .span-2-cols {
            grid-column-start: 2;
            grid-column-end: 4;
            background: #e17055;
        }

        /* Demo 3: Both row and column */
        .grid-both {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            width: fit-content;
        }

        .grid-both .span-both {
            grid-row-start: 1;
            grid-row-end: 3;
            grid-column-start: 2;
            grid-column-end: 4;
            background: #00b894;
        }

        /* Demo 4: span keyword */
        .grid-span {
            display: grid;
            grid-template-columns: repeat(4, 80px);
            grid-template-rows: repeat(2, 80px);
            gap: 5px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            width: fit-content;
        }

        .grid-span .span-2 {
            grid-column-start: 1;
            grid-column-end: span 2;
            background: #6c5ce7;
        }

        .grid-span .span-3 {
            grid-column-start: 3;
            grid-column-end: span 2;
            background: #e17055;
        }

        /* Grid lines visualization */
        .grid-lines {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(2, 100px);
            gap: 0;
            padding: 0;
            background: #fff;
            border: 2px solid #333;
            margin: 15px auto;
            width: fit-content;
            position: relative;
        }

        .grid-lines .cell {
            border: 1px dashed #999;
            border-radius: 0;
            background: #f8f9fa;
            color: #333;
            font-size: 0.8rem;
        }

        .grid-lines .cell.line-label {
            background: #ffc107;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1>grid-row-start, grid-column-start, grid-row-end, grid-column-end</h1>

    <!-- ====== 1. GRID-ROW-START / GRID-ROW-END ====== -->
    <section>
        <h2>1. grid-row-start &amp; grid-row-end</h2>
        <p>Control where an item <strong>starts</strong> and <strong>ends</strong> within rows.</p>

        <div class="grid-rows">
            <div class="cell span-2-rows">Spans 2 Rows<br>(start: 1, end: 3)</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
        </div>

        <div class="code-block">
            .span-2-rows {
                grid-row-start: 1;   /* Starts at row line 1 */
                grid-row-end: 3;     /* Ends at row line 3 (spans rows 1 & 2) */
            }
        </div>
    </section>

    <!-- ====== 2. GRID-COLUMN-START / GRID-COLUMN-END ====== -->
    <section>
        <h2>2. grid-column-start &amp; grid-column-end</h2>
        <p>Control where an item <strong>starts</strong> and <strong>ends</strong> within columns.</p>

        <div class="grid-columns">
            <div class="cell">1</div>
            <div class="cell span-2-cols">Spans 2 Columns<br>(start: 2, end: 4)</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
        </div>

        <div class="code-block">
            .span-2-cols {
                grid-column-start: 2;  /* Starts at column line 2 */
                grid-column-end: 4;    /* Ends at column line 4 (spans cols 2 & 3) */
            }
        </div>
    </section>

    <!-- ====== 3. BOTH ROW AND COLUMN ====== -->
    <section>
        <h2>3. Combining Row and Column</h2>
        <p>Use all four properties to position an item precisely.</p>

        <div class="grid-both">
            <div class="cell">1</div>
            <div class="cell span-both">Spans 2 Rows × 2 Columns<br>(row: 1→3, col: 2→4)</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
        </div>

        <div class="code-block">
            .span-both {
                grid-row-start: 1;
                grid-row-end: 3;
                grid-column-start: 2;
                grid-column-end: 4;
            }
        </div>
    </section>

    <!-- ====== 4. THE span KEYWORD ====== -->
    <section>
        <h2>4. Using the <code>span</code> Keyword</h2>
        <p>Instead of specifying the end line, use <code>span</code> to indicate how many tracks to cover.</p>

        <div class="grid-span">
            <div class="cell span-2">span 2</div>
            <div class="cell span-3">span 2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
        </div>

        <div class="code-block">
            /* These two are equivalent */
            .item {
                grid-column-start: 1;
                grid-column-end: span 2;  /* Spans 2 columns from start */
            }

            .item {
                grid-column-start: 1;
                grid-column-end: 3;       /* Same result */
            }
        </div>
    </section>

    <!-- ====== 5. GRID LINES VISUALIZATION ====== -->
    <section>
        <h2>5. Understanding Grid Lines</h2>
        <p>In a 3×2 grid, there are <strong>4 column lines</strong> and <strong>3 row lines</strong>.</p>

        <div style="display: flex; flex-direction: column; align-items: center;">
            <!-- Column line labels -->
            <div style="display: flex; gap: 0; margin-bottom: 5px; padding-left: 40px;">
                <div style="width: 100px; text-align: center; font-weight: bold; color: #007bff;">Line 1</div>
                <div style="width: 100px; text-align: center; font-weight: bold; color: #007bff;">Line 2</div>
                <div style="width: 100px; text-align: center; font-weight: bold; color: #007bff;">Line 3</div>
                <div style="width: 100px; text-align: center; font-weight: bold; color: #007bff;">Line 4</div>
            </div>

            <div style="display: flex; align-items: center;">
                <!-- Row line labels -->
                <div style="display: flex; flex-direction: column; margin-right: 5px;">
                    <div style="height: 100px; display: flex; align-items: center; font-weight: bold; color: #28a745;">Line 1</div>
                    <div style="height: 100px; display: flex; align-items: center; font-weight: bold; color: #28a745;">Line 2</div>
                    <div style="height: 100px; display: flex; align-items: center; font-weight: bold; color: #28a745;">Line 3</div>
                </div>

                <div class="grid-lines">
                    <div class="cell">Cell 1</div>
                    <div class="cell">Cell 2</div>
                    <div class="cell">Cell 3</div>
                    <div class="cell">Cell 4</div>
                    <div class="cell">Cell 5</div>
                    <div class="cell">Cell 6</div>
                </div>
            </div>
        </div>

        <p class="note" style="text-align: center; margin-top: 15px;">
            <span class="highlight">Column lines</span> run vertically between columns (1, 2, 3, 4).<br>
            <span class="highlight">Row lines</span> run horizontally between rows (1, 2, 3).
        </p>
    </section>

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

        <h3>Grid Placement Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>grid-row-start</code></td>
                <td>Starting row line</td>
                <td><code>grid-row-start: 1;</code></td>
            </tr>
            <tr>
                <td><code>grid-row-end</code></td>
                <td>Ending row line</td>
                <td><code>grid-row-end: 3;</code></td>
            </tr>
            <tr>
                <td><code>grid-column-start</code></td>
                <td>Starting column line</td>
                <td><code>grid-column-start: 2;</code></td>
            </tr>
            <tr>
                <td><code>grid-column-end</code></td>
                <td>Ending column line</td>
                <td><code>grid-column-end: 4;</code></td>
            </tr>
        </table>

        <h3>Values for All Four Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>auto</code></td>
                <td>Next available track (default)</td>
                <td><code>grid-row-start: auto;</code></td>
            </tr>
            <tr>
                <td><code>integer</code></td>
                <td>Specific line number</td>
                <td><code>grid-row-start: 2;</code></td>
            </tr>
            <tr>
                <td><code>span #n</code></td>
                <td>Spans n tracks from start</td>
                <td><code>grid-row-end: span 2;</code></td>
            </tr>
        </table>

        <h3>Shorthand Equivalents</h3>
        <table class="reference-table">
            <tr>
                <th>Longhand</th>
                <th>Shorthand</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>grid-row-start</code> + <code>grid-row-end</code></td>
                <td><code>grid-row</code></td>
                <td><code>grid-row: 1 / 3;</code></td>
            </tr>
            <tr>
                <td><code>grid-column-start</code> + <code>grid-column-end</code></td>
                <td><code>grid-column</code></td>
                <td><code>grid-column: 2 / 4;</code></td>
            </tr>
            <tr>
                <td>All four</td>
                <td><code>grid-area</code></td>
                <td><code>grid-area: 1 / 2 / 3 / 4;</code></td>
            </tr>
        </table>
    </section>

    <!-- ====== 7. BEST PRACTICES ====== -->
    <section>
        <h2>7. 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>span</code> when you only care about how many tracks an item covers</li>
                <li>Use specific line numbers when you need exact placement</li>
                <li>Combine row and column properties for precise positioning</li>
                <li>Use shorthand <code>grid-row</code>, <code>grid-column</code>, or <code>grid-area</code> for cleaner code</li>
                <li>Remember that end lines are <strong>exclusive</strong> (end: 3 means rows 1 and 2)</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 confuse line numbers with track numbers (lines are between tracks)</li>
                <li>Don't forget that grid lines start at 1, not 0</li>
                <li>Don't use explicit placement when auto-placement would work</li>
                <li>Don't mix up <code>start</code> and <code>end</code> — start must be less than end</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Description	Example
`grid-row-start`	Starting row line	`grid-row-start: 1;`
`grid-row-end`	Ending row line	`grid-row-end: 3;`
`grid-column-start`	Starting column line	`grid-column-start: 2;`
`grid-column-end`	Ending column line	`grid-column-end: 4;`

Values

Value	Description	Example
`auto`	Next available track (default)	`grid-row-start: auto;`
`integer`	Specific line number	`grid-row-start: 2;`
`span #n`	Spans n tracks from start	`grid-row-end: span 2;`

Shorthand Equivalents

Longhand	Shorthand	Example
`grid-row-start` + `grid-row-end`	`grid-row`	`grid-row: 1 / 3;`
`grid-column-start` + `grid-column-end`	`grid-column`	`grid-column: 2 / 4;`
All four	`grid-area`	`grid-area: 1 / 2 / 3 / 4;`

Best Practices

✅ Do This:

/* Use span when you only care about coverage */
.item {
    grid-column: 1 / span 2;  /* Spans 2 columns from line 1 */
}

/* Use specific lines for precise placement */
.item {
    grid-row: 2 / 4;  /* Starts at line 2, ends at line 4 */
}

/* Combine row and column for full control */
.item {
    grid-area: 1 / 2 / 3 / 4;
}

❌ Don’t Do This:

/* Don't confuse lines with tracks */
.item {
    grid-row-start: 0;  /* Invalid! Lines start at 1 */
}

/* Don't mix up start and end */
.item {
    grid-row-start: 3;
    grid-row-end: 1;  /* Invalid! Start must be less than end */
}

/* Don't use explicit placement unnecessarily */
.item {
    grid-row: 1 / 2;  /* Auto-placement would work fine */
}

Pro Tip: Think of grid lines as the borders between cells, not the cells themselves. In a 3-column grid, there are 4 column lines (1, 2, 3, 4). The grid-row-start and grid-column-start properties specify which line the item starts at, while grid-row-end and grid-column-end specify which line it ends before. Use the shorthand properties (grid-row, grid-column, grid-area) for cleaner, more readable code!

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. grid-row-start

Values

2. grid-row-end

Values

3. grid-column-start

Values

4. grid-column-end

Values

Visualizing Grid Lines

Using span

Complete Example

Quick Reference

Values

Shorthand Equivalents

Best Practices

Ads Blocker Detected!!!

Using `span`