{
    "slug": "css_grid_areas",
    "term": "CSS Grid Template Areas",
    "category": "frontend",
    "difficulty": "beginner",
    "short": "A CSS Grid feature that lets you name regions of a grid and assign elements to them by name, making complex layouts readable and maintainable without calculating column/row numbers.",
    "long": "Grid template areas use ASCII art to define a layout visually in CSS. The `grid-template-areas` property on the container accepts a string per row, with each word representing one grid cell. Repeated words span multiple cells. A dot (`.`) represents an empty cell. Child elements are assigned to areas using `grid-area: name`. This approach decouples the visual layout from the DOM order and column/row counting, making it easy to create responsive layouts by redefining areas at breakpoints. Unlike `grid-column: 2 / 4` shorthand, area names are self-documenting. The feature also implicitly defines `grid-template-rows` and `grid-template-columns` line names based on area boundaries — each area creates `-start` and `-end` named lines automatically.",
    "aliases": [
        "grid-template-areas",
        "grid areas",
        "named grid areas",
        "grid-area"
    ],
    "tags": [
        "css",
        "grid",
        "layout",
        "frontend",
        "responsive"
    ],
    "misconception": "Grid template areas are only useful for simple page layouts — they work equally well for component-level layouts like card grids, dashboard widgets, and form layouts, and they shine most when layouts need to rearrange at different breakpoints.",
    "why_it_matters": "Layouts defined with column/row numbers are fragile — inserting a column breaks all subsequent placements. Named areas make layouts self-documenting, easy to rearrange at breakpoints, and immediately understandable in code review.",
    "common_mistakes": [
        "Defining a non-rectangular area — grid template areas must always form a rectangle; an L-shape or T-shape is invalid and silently ignored.",
        "Mismatching the number of columns across rows — every row string must define the same number of cells.",
        "Using the same area name in non-contiguous cells — an area must be a single contiguous rectangle.",
        "Forgetting to set `display: grid` on the parent before using `grid-template-areas`."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "css_layout",
        "css_grid_subgrid",
        "responsive_design",
        "css_container_queries",
        "css_logical_properties"
    ],
    "prerequisites": [
        "css_layout"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas",
        "https://css-tricks.com/snippets/css/complete-guide-grid/"
    ],
    "bad_code": "/* Hard to read — pure column/row numbers */\n.layout {\n    display: grid;\n    grid-template-columns: 200px 1fr 200px;\n    grid-template-rows: 60px 1fr 40px;\n}\n.header  { grid-column: 1 / 4; grid-row: 1; }\n.sidebar { grid-column: 1;     grid-row: 2; }\n.main    { grid-column: 2;     grid-row: 2; }\n.aside   { grid-column: 3;     grid-row: 2; }\n.footer  { grid-column: 1 / 4; grid-row: 3; }",
    "good_code": "/* Self-documenting with named areas */\n.layout {\n    display: grid;\n    grid-template-columns: 200px 1fr 200px;\n    grid-template-rows: 60px 1fr 40px;\n    grid-template-areas:\n        'header  header  header'\n        'sidebar main    aside'\n        'footer  footer  footer';\n}\n.header  { grid-area: header;  }\n.sidebar { grid-area: sidebar; }\n.main    { grid-area: main;    }\n.aside   { grid-area: aside;   }\n.footer  { grid-area: footer;  }\n\n/* Responsive: redefine areas at breakpoint */\n@media (max-width: 768px) {\n    .layout {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            'header'\n            'main'\n            'sidebar'\n            'aside'\n            'footer';\n    }\n}",
    "example_note": "The mobile breakpoint completely reorders the layout — sidebar moves below main — by redefining area strings, with no changes to the HTML or element selectors.",
    "quick_fix": "Replace `grid-column`/`grid-row` number placements with `grid-template-areas` on the parent and `grid-area: name` on children",
    "severity": "low",
    "effort": "low",
    "created": "2026-03-24",
    "updated": "2026-03-24",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/css_grid_areas",
        "html_url": "https://codeclaritylab.com/glossary/css_grid_areas",
        "json_url": "https://codeclaritylab.com/glossary/css_grid_areas.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[CSS Grid Template Areas](https://codeclaritylab.com/glossary/css_grid_areas) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/css_grid_areas"
            }
        }
    }
}