grid-area には 2つの顔がある

• grid-area | MDN

大きく 2つの使い方があるプロパティ。

まずは grid-row と grid-column をまとめて指定するショートハンドとしての一面。

• (Demo) grid-area、ショートハンドの一面 | JSFiddle

これは指定方法がわかりづらいので使う予定はないけど、MDN とか参考にするドキュメントで使われていることもあるので、一応覚えておくと役立つ。

/* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
.grid__item01 {
  grid-area: 1 / 1 / 3 / 4;
}

/* 以下の指定と同じ */
.grid__item01 {
  grid-row: 1 / 3;
  grid-column: 1 / 4;
}

/* また、以下の指定とも同じ */
.grid__item01 {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 4;
}

もうひとつ使い方としては、グリッドコンテナーで grid-template-areas が指定されている場合、グリッドセルの名前をつけるプロパティとして使われる。

• (Demo) grid-area、グリッドセルに名前をつける一面 | JSFiddle

同じプロパティで 2つ役割？嘘じゃないか？と思ったけど MDN につぎのようにあったので、合ってるんじゃないかと思う。

The grid-area property can also be set to a <custom-ident> which acts as a name for the area, which can then be placed using grid-template-areas.

grid-area | MDN

.grid {
  grid-template-areas: "header header header"
                       "nav    main   main"
                       "nav    main   main"
                       "footer footer footer";
}

.grid__header {
  grid-area: header;
}

...