CSS 22 💻 grid-row, grid-column properties - KandZ

The grid-row and grid-column properties are shorthand for the four longhand properties you learned in the previous lesson. They let you control where a grid item starts and ends in both rows and columns.

Overview of Properties

Property	Description	Shorthand For
`grid-row`	Specifies start and end row lines	`grid-row-start` + `grid-row-end`
`grid-column`	Specifies start and end column lines	`grid-column-start` + `grid-column-end`

1. grid-row

The grid-row property specifies where a grid item starts and ends within the grid rows.

.item1 {
    grid-row: 1 / 3; /* Starts at row line 1, ends at row line 3 */
}

Syntax

grid-row: <start> / <end>;
grid-row: <start> / span <n>;
grid-row: <start>;  /* Only start, end is auto */

Values

Value	Description	Example
`auto`	Auto placement (default)	`grid-row: auto;`
`integer / integer`	Start line / End line	`grid-row: 1 / 3;`
`integer / span #n`	Start line / Span n rows	`grid-row: 1 / span 2;`
`span #n / integer`	Span n rows / End line	`grid-row: span 2 / 4;`
`integer`	Start line only	`grid-row: 2;`

2. grid-column

The grid-column property specifies where a grid item starts and ends within the grid columns.

.item1 {
    grid-column: 2 / 4; /* Starts at column line 2, ends at column line 4 */
}

Syntax

grid-column: <start> / <end>;
grid-column: <start> / span <n>;
grid-column: <start>;  /* Only start, end is auto */

Values

Value	Description	Example
`auto`	Auto placement (default)	`grid-column: auto;`
`integer / integer`	Start line / End line	`grid-column: 2 / 4;`
`integer / span #n`	Start line / Span n columns	`grid-column: 2 / span 2;`
`span #n / integer`	Span n columns / End line	`grid-column: span 2 / 4;`
`integer`	Start line only	`grid-column: 2;`

How It Works

Remember: Grid lines are the borders between cells, not the cells themselves.

In a 4-column grid:

Column Lines:  1        2        3        4        5
              │        │        │        │        │
              │ Cell 1 │ Cell 2 │ Cell 3 │ Cell 4 │
              │        │        │        │        │

grid-column: 2 / 4 → Starts at line 2, ends at line 4 (spans columns 2 and 3)
grid-column: 2 / span 2 → Starts at line 2, spans 2 columns (same result)

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 and grid-column 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(4, 1fr);
            grid-template-rows: repeat(4, 80px);
            gap: 10px;
            padding: 15px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
        }

        .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 */
        .item-row {
            grid-row: 1 / 3;
            background: #6c5ce7 !important;
        }

        /* Demo 2: grid-column */
        .item-col {
            grid-column: 2 / 4;
            background: #e17055 !important;
        }

        /* Demo 3: Both */
        .item-both {
            grid-row: 2 / 5;
            grid-column: 1 / 3;
            background: #00b894 !important;
        }

        /* Demo 4: span keyword */
        .item-span-row {
            grid-row: 1 / span 2;
            background: #6c5ce7 !important;
        }

        .item-span-col {
            grid-column: 2 / span 2;
            background: #e17055 !important;
        }

        /* Demo 5: multiple items */
        .grid-multi {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 80px);
            gap: 10px;
            padding: 15px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
        }

        .header-item {
            grid-column: 1 / 5;
            background: #007bff !important;
        }

        .sidebar-item {
            grid-row: 2 / 4;
            grid-column: 1 / 2;
            background: #6c5ce7 !important;
        }

        .main-item {
            grid-row: 2 / 4;
            grid-column: 2 / 5;
            background: #00b894 !important;
        }

        .footer-item {
            grid-column: 1 / 5;
            grid-row: 4 / 5;
            background: #e17055 !important;
        }

        /* Grid lines visualization */
        .grid-lines {
            display: grid;
            grid-template-columns: repeat(4, 80px);
            grid-template-rows: repeat(3, 80px);
            gap: 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.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .grid-lines .cell .line-num {
            font-size: 0.6rem;
            color: #007bff;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1>grid-row and grid-column Properties</h1>

    <!-- ====== 1. GRID-ROW ====== -->
    <section>
        <h2>1. grid-row</h2>
        <p>Controls where an item starts and ends in <strong>rows</strong>.</p>

        <div class="grid-container">
            <div class="cell item-row">grid-row: 1 / 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 class="cell">8</div>
        </div>

        <div class="code-block">
            .item-row {
                grid-row: 1 / 3;  /* Starts at row line 1, ends at row line 3 */
            }
        </div>
    </section>

    <!-- ====== 2. GRID-COLUMN ====== -->
    <section>
        <h2>2. grid-column</h2>
        <p>Controls where an item starts and ends in <strong>columns</strong>.</p>

        <div class="grid-container">
            <div class="cell">1</div>
            <div class="cell item-col">grid-column: 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 class="cell">8</div>
        </div>

        <div class="code-block">
            .item-col {
                grid-column: 2 / 4;  /* Starts at column line 2, ends at column line 4 */
            }
        </div>
    </section>

    <!-- ====== 3. BOTH ROW AND COLUMN ====== -->
    <section>
        <h2>3. Combining grid-row and grid-column</h2>
        <p>Use both properties to position an item precisely in the grid.</p>

        <div class="grid-container">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell item-both">grid-row: 2 / 5<br>grid-column: 1 / 3</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">
            .item-both {
                grid-row: 2 / 5;     /* Spans rows 2, 3, 4 */
                grid-column: 1 / 3;  /* Spans columns 1, 2 */
            }
        </div>
    </section>

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

        <div class="grid-container">
            <div class="cell item-span-row">grid-row: 1 / span 2</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell item-span-col">grid-column: 2 / span 2</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
        </div>

        <div class="code-block">
            .item-span-row {
                grid-row: 1 / span 2;     /* Starts at line 1, spans 2 rows */
            }

            .item-span-col {
                grid-column: 2 / span 2;  /* Starts at line 2, spans 2 columns */
            }

            /* These are equivalent to: */
            /* grid-row: 1 / 3; */
            /* grid-column: 2 / 4; */
        </div>
    </section>

    <!-- ====== 5. PRACTICAL LAYOUT ====== -->
    <section>
        <h2>5. Practical Layout Example</h2>
        <p>A classic header / sidebar / main / footer layout using <code>grid-row</code> and <code>grid-column</code>.</p>

        <div class="grid-multi">
            <div class="cell header-item">Header (grid-column: 1 / 5)</div>
            <div class="cell sidebar-item">Sidebar<br>(grid-row: 2 / 4)<br>(grid-column: 1 / 2)</div>
            <div class="cell main-item">Main Content<br>(grid-row: 2 / 4)<br>(grid-column: 2 / 5)</div>
            <div class="cell footer-item">Footer (grid-column: 1 / 5)</div>
        </div>

        <div class="code-block">
            .header-item {
                grid-column: 1 / 5;   /* Full width */
            }

            .sidebar-item {
                grid-row: 2 / 4;      /* Spans rows 2 and 3 */
                grid-column: 1 / 2;   /* First column */
            }

            .main-item {
                grid-row: 2 / 4;      /* Spans rows 2 and 3 */
                grid-column: 2 / 5;   /* Columns 2-4 */
            }

            .footer-item {
                grid-column: 1 / 5;   /* Full width */
            }
        </div>
    </section>

    <!-- ====== 6. GRID LINES VISUALIZATION ====== -->
    <section>
        <h2>6. Understanding Grid Lines</h2>
        <p>In a 4-column × 3-row grid, there are <strong>5 column lines</strong> and <strong>4 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: 80px; text-align: center; font-weight: bold; color: #007bff;">Line 1</div>
                <div style="width: 80px; text-align: center; font-weight: bold; color: #007bff;">Line 2</div>
                <div style="width: 80px; text-align: center; font-weight: bold; color: #007bff;">Line 3</div>
                <div style="width: 80px; text-align: center; font-weight: bold; color: #007bff;">Line 4</div>
                <div style="width: 80px; text-align: center; font-weight: bold; color: #007bff;">Line 5</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: 80px; display: flex; align-items: center; font-weight: bold; color: #28a745;">Line 1</div>
                    <div style="height: 80px; display: flex; align-items: center; font-weight: bold; color: #28a745;">Line 2</div>
                    <div style="height: 80px; display: flex; align-items: center; font-weight: bold; color: #28a745;">Line 3</div>
                    <div style="height: 80px; display: flex; align-items: center; font-weight: bold; color: #28a745;">Line 4</div>
                </div>

                <div class="grid-lines">
                    <div class="cell">Cell 1<br><span class="line-num">1,1 → 2,2</span></div>
                    <div class="cell">Cell 2<br><span class="line-num">2,1 → 3,2</span></div>
                    <div class="cell">Cell 3<br><span class="line-num">3,1 → 4,2</span></div>
                    <div class="cell">Cell 4<br><span class="line-num">4,1 → 5,2</span></div>
                    <div class="cell">Cell 5<br><span class="line-num">1,2 → 2,3</span></div>
                    <div class="cell">Cell 6<br><span class="line-num">2,2 → 3,3</span></div>
                    <div class="cell">Cell 7<br><span class="line-num">3,2 → 4,3</span></div>
                    <div class="cell">Cell 8<br><span class="line-num">4,2 → 5,3</span></div>
                    <div class="cell">Cell 9<br><span class="line-num">1,3 → 2,4</span></div>
                    <div class="cell">Cell 10<br><span class="line-num">2,3 → 3,4</span></div>
                    <div class="cell">Cell 11<br><span class="line-num">3,3 → 4,4</span></div>
                    <div class="cell">Cell 12<br><span class="line-num">4,3 → 5,4</span></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, 5).<br>
            <span class="highlight">Row lines</span> run horizontally between rows (1, 2, 3, 4).<br>
            Each cell is defined by its start and end lines.
        </p>
    </section>

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

        <h3>grid-row and grid-column</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>grid-row</code></td>
                <td>Shorthand for row start + end</td>
                <td><code>grid-row: 1 / 3;</code></td>
            </tr>
            <tr>
                <td><code>grid-column</code></td>
                <td>Shorthand for column start + end</td>
                <td><code>grid-column: 2 / 4;</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>auto</code></td>
                <td>Auto placement (default)</td>
                <td><code>grid-row: auto;</code></td>
            </tr>
            <tr>
                <td><code>integer / integer</code></td>
                <td>Start line / End line</td>
                <td><code>grid-row: 1 / 3;</code></td>
            </tr>
            <tr>
                <td><code>integer / span #n</code></td>
                <td>Start line / Span n tracks</td>
                <td><code>grid-row: 1 / span 2;</code></td>
            </tr>
            <tr>
                <td><code>span #n / integer</code></td>
                <td>Span n tracks / End line</td>
                <td><code>grid-row: span 2 / 4;</code></td>
            </tr>
            <tr>
                <td><code>integer</code></td>
                <td>Start line only</td>
                <td><code>grid-row: 2;</code></td>
            </tr>
        </table>

        <h3>Longhand vs Shorthand</h3>
        <table class="reference-table">
            <tr>
                <th>Longhand</th>
                <th>Shorthand</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>grid-row-start: 1;<br>grid-row-end: 3;</code></td>
                <td><code>grid-row</code></td>
                <td><code>grid-row: 1 / 3;</code></td>
            </tr>
            <tr>
                <td><code>grid-column-start: 2;<br>grid-column-end: 4;</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>

    <!-- ====== 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>grid-row</code> and <code>grid-column</code> shorthand instead of the four longhand properties</li>
                <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>Remember that end lines are <strong>exclusive</strong></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`	Shorthand for row start + end	`grid-row: 1 / 3;`
`grid-column`	Shorthand for column start + end	`grid-column: 2 / 4;`

Values

Value	Description	Example
`auto`	Auto placement (default)	`grid-row: auto;`
`integer / integer`	Start line / End line	`grid-row: 1 / 3;`
`integer / span #n`	Start line / Span n tracks	`grid-row: 1 / span 2;`
`span #n / integer`	Span n tracks / End line	`grid-row: span 2 / 4;`
`integer`	Start line only	`grid-row: 2;`

Longhand vs Shorthand

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-row: 1 / span 2;     /* Spans 2 rows from line 1 */
}

.item {
    grid-column: 2 / span 2;  /* Spans 2 columns from line 2 */
}

/* 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-row: 1 / 3;
    grid-column: 2 / 4;
}

❌ Don’t Do This:

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

/* Don't mix up start and end */
.item {
    grid-row: 3 / 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: The grid-row and grid-column shorthand properties are the most commonly used ways to position grid items. Use span when you want to say “cover this many tracks” without calculating the exact end line. Use specific line numbers when you need precise control. Remember: end lines are exclusive — grid-row: 1 / 3 means the item occupies rows 1 and 2, not rows 1, 2, and 3!

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

Syntax

Values

2. grid-column

Syntax

Values

How It Works

Complete Example

Quick Reference

Values

Longhand vs Shorthand

Best Practices

Ads Blocker Detected!!!