What is "grid area"?

CSSJunior~1 min read

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:

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.

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.

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.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.