Suggest an edit

Improve this article

Refine the answer for “What is "grid area"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`grid-area` is a property that sets **the placement area of an element in CSS Grid**, that is, in which **rows and columns** it will be located.

It can work **in two ways**:

---

### **1. The coordinate method (via grid lines)**

```css
.item {
  grid-area: 1 / 2 / 3 / 4;
}
```

Format:

```javascript
grid-area: row-start / column-start / row-end / column-end;
```

That is, the element will start at **row 1**, **column 2**, and stretch to **row 3** and **column 4**.

---

### **2. The named method (via** `grid-template-areas`**)**

In the container:

```css
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
```

In the element:

```css
.header {
  grid-area: header;
}
```

Here, `grid-area` simply references the name of the area defined in the layout.

---

### **Main idea**

`grid-area` is **the position + size of the element in grid coordinates**, or **the name of an area**, if the `grid-template-areas` template is used.

**Flexbox cannot do this**, this is one of the key differences of Grid.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts173 words

For the reviewer

Visible only to the moderator. Helps review go faster.