# CSS Grid Template Areas

`grid-template-areas` is a property used on a grid container to define named grid areas. It provides a visual way to describe the layout of the grid, almost like drawing it with ASCII art in your CSS.

## 1. The Concept

Instead of counting line numbers (`grid-column: 1 / 3`), you assign names to grid items using the `grid-area` property, and then reference those names in the `grid-template-areas` property of the container.

## 2. Defining Areas on Items

First, give each direct child a name.

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

## 3. Creating the Template

Then, arrange these names in the container. Each string represents a row.

```css
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}
```

This creates a layout where:
1.  **Row 1:** Header spans both columns.
2.  **Row 2:** Sidebar is in the first column, Content in the second.
3.  **Row 3:** Footer spans both columns.

## 4. Rules and Syntax

*   **Rectangles Only:** Areas must be rectangular. You cannot create 'L' or 'T' shapes.
*   **Empty Cells:** Use a dot (`.`) to signify an empty cell.
*   **Repetition:** Repeat the name to make an area span multiple columns.
*   **Rows:** Each string in `grid-template-areas` represents a row. Every string must have the same number of cells (names or dots).

## 5. Responsive Design

Grid Template Areas shine in responsive design because you can completely rearrange the layout just by redefining the `grid-template-areas` string in a media query, without touching the HTML or the individual item styles.

```css
/* Mobile Layout */
.container {
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "content"
    "sidebar"
    "footer";
}

/* Desktop Layout */
@media (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-areas: 
      "header header"
      "sidebar content"
      "footer footer";
  }
}
```

[[programming/css/css]]
[[programming/css/grid-layout]]