CSS 19 💻 grid-template-areas, grid-area and grid-template - KandZ

These three properties take CSS Grid to the next level, allowing you to create named grid areas, precisely position items, and use a shorthand for the entire grid definition.

Overview of Properties

Property	Description
`grid-template-areas`	Defines named grid areas using a visual map
`grid-area`	Positions a grid item in the grid (or assigns it to a named area)
`grid-template`	Shorthand for `grid-template-columns`, `grid-template-rows`, and `grid-template-areas`

1. grid-template-areas

The grid-template-areas property defines named grid areas using a visual map of strings. Each string represents a row, and each word represents a cell.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: 50px auto 70px;
    grid-template-areas:
        "header header header"
        "sidebar main content"
        "footer footer footer";
    gap: 10px;
    padding: 10px;
}

Visual Map:

┌─────────────────────────────────────┐
│              header                  │
├──────────┬──────────┬───────────────┤
│ sidebar  │   main   │   content     │
├──────────┴──────────┴───────────────┤
│              footer                  │
└─────────────────────────────────────┘

Assigning Items to Areas

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Null Tokens

Use a sequence of full stops (.) to represent empty cells:

.grid-container {
    grid-template-areas:
        "header header header"
        "sidebar . content"
        "footer footer footer";
}

The middle cell (between sidebar and content) is empty.

2. grid-area

The grid-area property positions a grid item using either:

A named area (from grid-template-areas)
Row/column start and end positions

Syntax (Numeric):

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

Position	Required?	Description
1st value	Optional	Start row
2nd value	Optional	Start column
3rd value	Required	End row
4th value	Optional	End column

Examples:

/* Spans 3 rows, 1 column (starts at row 1, col 1) */
.item1 {
    grid-area: 1 / 1 / span 3 / 2;
}

/* Spans 2 rows, 2 columns (starts at row 1, col 3) */
.item2 {
    grid-area: 1 / 3 / span 2 / span 2;
}

/* Spans 1 row, 2 columns (starts at row 2, col 1) */
.item3 {
    grid-area: 2 / 1 / 3 / 3;
}

Using `span`:

span 3 — spans 3 tracks from the start position
span 2 — spans 2 tracks from the start position

3. grid-template (Shorthand)

The grid-template property is a shorthand for:

grid-template-columns
grid-template-rows
grid-template-areas

.grid-container-template {
    display: grid;
    grid-template:
        "header header" auto
        "sidebar main" 200px / 1fr 3fr;
    gap: 10px;
    padding: 10px;
}

Syntax:

grid-template: 
    "area area" <row-size>
    "area area" <row-size> / <column-sizes>;

Breaking It Down:

Part	Description
`"header header" auto`	First row: header spans 2 columns, row height is `auto`
`"sidebar main" 200px`	Second row: sidebar and main, row height is `200px`
`/ 1fr 3fr`	Column sizes: 1fr for sidebar, 3fr for main

Visual Layout:

┌──────────────┬─────────────────────────┐
│        header (auto)                    │
├──────────────┼─────────────────────────┤
│   sidebar    │         main            │
│    (1fr)     │         (3fr)           │
│   (200px)    │        (200px)          │
└──────────────┴─────────────────────────┘

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-template-areas, grid-area, grid-template</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;
        }

        /* ====== GRID AREA DEMO ====== */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 200px);
            grid-template-rows: 50px auto 70px;
            grid-template-areas:
                "header header header"
                "sidebar main content"
                "footer footer footer";
            gap: 10px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            max-width: 650px;
        }

        .cell {
            border: 2px solid #333;
            padding: 15px;
            border-radius: 4px;
            font-weight: bold;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header  { grid-area: header;  background-color: #f0e68c; }
        .sidebar { grid-area: sidebar; background-color: #add8e6; }
        .main    { grid-area: main;    background-color: #90ee90; }
        .content { grid-area: content; background-color: #b0c4de; }
        .footer  { grid-area: footer;  background-color: #f5deb3; }

        /* ====== GRID AREA NUMERIC DEMO ====== */
        .grid-container-area {
            display: grid;
            grid-template-columns: repeat(3, 200px);
            grid-template-rows: 50px auto 70px;
            gap: 10px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            max-width: 650px;
        }

        .item1 {
            grid-area: 1 / 1 / span 3 / 2;
            background-color: #f0e68c;
        }

        .item2 {
            grid-area: 1 / 3 / span 2 / span 2;
            background-color: #add8e6;
        }

        .item3 {
            grid-area: 2 / 1 / 3 / 3;
            background-color: #90ee90;
        }

        /* ====== GRID TEMPLATE SHORTHAND ====== */
        .grid-container-template {
            display: grid;
            grid-template:
                "header header" auto
                "sidebar main" 200px / 1fr 3fr;
            gap: 10px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            max-width: 650px;
        }

        .header, .sidebar {
            background-color: #f0e68c;
        }

        .main {
            background-color: #add8e6;
        }

        /* ====== NULL TOKEN DEMO ====== */
        .grid-null {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 80px);
            grid-template-areas:
                "header header header"
                "sidebar . content"
                "footer footer footer";
            gap: 10px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px auto;
            max-width: 650px;
        }

        .grid-null .header  { grid-area: header;  background-color: #f0e68c; }
        .grid-null .sidebar { grid-area: sidebar; background-color: #add8e6; }
        .grid-null .content { grid-area: content; background-color: #b0c4de; }
        .grid-null .footer  { grid-area: footer;  background-color: #f5deb3; }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
            text-align: center;
        }
    </style>
</head>
<body>

    <h1>grid-template-areas, grid-area, and grid-template</h1>

    <!-- ====== 1. GRID-TEMPLATE-AREAS ====== -->
    <section>
        <h2>1. grid-template-areas (Named Areas)</h2>
        <p>Define a visual map of your layout using named areas in double quotes.</p>

        <div class="grid-container">
            <div class="cell header">Header</div>
            <div class="cell sidebar">Sidebar</div>
            <div class="cell main">Main Content</div>
            <div class="cell content">Additional Content</div>
            <div class="cell footer">Footer</div>
        </div>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 200px);
                grid-template-rows: 50px auto 70px;
                grid-template-areas:
                    "header header header"
                    "sidebar main content"
                    "footer footer footer";
                gap: 10px;
            }

            .header  { grid-area: header; }
            .sidebar { grid-area: sidebar; }
            .main    { grid-area: main; }
            .content { grid-area: content; }
            .footer  { grid-area: footer; }
        </div>
    </section>

    <!-- ====== 2. NULL TOKENS ====== -->
    <section>
        <h2>2. Null Tokens (Empty Cells)</h2>
        <p>Use full stops (<code>.</code>) to represent empty cells in the grid.</p>

        <div class="grid-null">
            <div class="cell header">Header</div>
            <div class="cell sidebar">Sidebar</div>
            <div class="cell content">Content</div>
            <div class="cell footer">Footer</div>
        </div>

        <p class="note">The middle cell (between sidebar and content) is empty.</p>

        <div class="code-block">
            .grid-null {
                grid-template-areas:
                    "header header header"
                    "sidebar . content"      /* . = empty cell */
                    "footer footer footer";
            }
        </div>
    </section>

    <!-- ====== 3. GRID-AREA (NUMERIC) ====== -->
    <section>
        <h2>3. grid-area (Numeric Positioning)</h2>
        <p>Position items using row/column start and end values.</p>

        <div class="grid-container-area">
            <div class="cell item1">Item 1 (spans 3 rows)</div>
            <div class="cell item2">Item 2 (spans 2 rows × 2 cols)</div>
            <div class="cell item3">Item 3 (spans 1 row × 2 cols)</div>
        </div>

        <div class="code-block">
            /* Starts at row 1, col 1 — spans 3 rows, 1 column */
            .item1 { grid-area: 1 / 1 / span 3 / 2; }

            /* Starts at row 1, col 3 — spans 2 rows, 2 columns */
            .item2 { grid-area: 1 / 3 / span 2 / span 2; }

            /* Starts at row 2, col 1 — spans 1 row, 2 columns */
            .item3 { grid-area: 2 / 1 / 3 / 3; }
        </div>
    </section>

    <!-- ====== 4. GRID-TEMPLATE (SHORTHAND) ====== -->
    <section>
        <h2>4. grid-template (Shorthand)</h2>
        <p>Combines columns, rows, and areas into a single declaration.</p>

        <div class="grid-container-template">
            <div class="cell header">Header</div>
            <div class="cell sidebar">Sidebar</div>
            <div class="cell main">Main Content</div>
        </div>

        <div class="code-block">
            .grid-container-template {
                display: grid;
                grid-template:
                    "header header" auto
                    "sidebar main" 200px / 1fr 3fr;
                gap: 10px;
            }
        </div>
    </section>

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

        <h3>Grid Area Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>grid-template-areas</code></td>
                <td>Defines named grid areas</td>
                <td><code>"header header" "sidebar main"</code></td>
            </tr>
            <tr>
                <td><code>grid-area</code></td>
                <td>Positions an item (named or numeric)</td>
                <td><code>grid-area: header;</code></td>
            </tr>
            <tr>
                <td><code>grid-area</code></td>
                <td>Positions an item (numeric)</td>
                <td><code>grid-area: 1 / 1 / span 3 / 2;</code></td>
            </tr>
            <tr>
                <td><code>grid-template</code></td>
                <td>Shorthand for columns, rows, and areas</td>
                <td><code>grid-template: "header" auto / 1fr 2fr;</code></td>
            </tr>
        </table>

        <h3>grid-area Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Position</th>
                <th>Required?</th>
            </tr>
            <tr>
                <td>1st value</td>
                <td>Start row</td>
                <td>Optional</td>
            </tr>
            <tr>
                <td>2nd value</td>
                <td>Start column</td>
                <td>Optional</td>
            </tr>
            <tr>
                <td>3rd value</td>
                <td>End row</td>
                <td>Required</td>
            </tr>
            <tr>
                <td>4th value</td>
                <td>End column</td>
                <td>Optional</td>
            </tr>
        </table>

        <h3>grid-template Shorthand Breakdown</h3>
        <table class="reference-table">
            <tr>
                <th>Part</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>"header header" auto</code></td>
                <td>Row 1: named areas + row height</td>
                <td>Header spans 2 columns, auto height</td>
            </tr>
            <tr>
                <td><code>"sidebar main" 200px</code></td>
                <td>Row 2: named areas + row height</td>
                <td>Sidebar and main, 200px height</td>
            </tr>
            <tr>
                <td><code>/ 1fr 3fr</code></td>
                <td>Column sizes</td>
                <td>Column 1 = 1fr, Column 2 = 3fr</td>
            </tr>
        </table>
    </section>

    <!-- ====== 6. BEST PRACTICES ====== -->
    <section>
        <h2>6. 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-template-areas</code> for clear, readable layouts</li>
                <li>Use meaningful area names (header, sidebar, main, footer)</li>
                <li>Use <code>grid-template</code> shorthand for concise code</li>
                <li>Use null tokens (<code>.</code>) for empty cells</li>
                <li>Use <code>span</code> for spanning multiple tracks</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 numeric <code>grid-area</code> when named areas would be clearer</li>
                <li>Don't forget that <code>grid-template-areas</code> must form a complete rectangle</li>
                <li>Don't use <code>grid-template</code> shorthand without understanding the order</li>
                <li>Don't mix named and numeric <code>grid-area</code> on the same item</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Description	Example
`grid-template-areas`	Defines named grid areas	`"header header" "sidebar main"`
`grid-area` (named)	Assigns item to a named area	`grid-area: header;`
`grid-area` (numeric)	Positions item by row/column	`grid-area: 1 / 1 / span 3 / 2;`
`grid-template`	Shorthand for columns, rows, areas	`grid-template: "header" auto / 1fr 2fr;`

grid-area Numeric Syntax

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

Position	Required?	Description
1st	Optional	Start row
2nd	Optional	Start column
3rd	Required	End row
4th	Optional	End column

Best Practices

✅ Do This:

/* Named areas — clear and readable */
.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Numeric positioning for precise control */
.item {
    grid-area: 1 / 2 / span 2 / span 3;
}

❌ Don’t Do This:

/* Don't use incomplete area maps */
.layout {
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer";  /* Invalid! Must form a complete rectangle */
}

/* Don't mix named and numeric on the same item */
.item {
    grid-area: header;  /* Named */
    grid-area: 1 / 1 / 2 / 2;  /* Numeric — overrides the named area */
}

Pro Tip: grid-template-areas is the most readable way to create complex layouts. Name your areas semantically (header, sidebar, main, footer) so the layout is self-documenting. Use null tokens (.) for empty cells. The grid-template shorthand combines everything into one declaration, but use it only when you’re comfortable with the syntax — it can be harder to read and maintain than separate properties!

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!