Why isn't this CSS grid-template-areas working?

Curriculum Help
,
1

I cannot find my error. Nothing is appearing:

https://codepen.io/El_Escandalo/pen/qBOxVgx?editors=1100

2

The values for the grid-template-areas are invalid (the cells do not form a rectangle).

grid-template-areas:
  "area2 area1 area2"
  "area2 area1 area2"
  "area2 area1 area2";

MDN: Values

<string>+

A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

csswg: <string>+

All strings must have the same number of columns, or else the declaration is invalid. If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

So this would be valid:

grid-template-areas:
  "area2 area1 area3"
  "area2 area1 area3"
  "area2 area1 area3";

Or this:

grid-template-areas:
  "area1 area1 area2"
  "area1 area1 area2"
  "area1 area1 area2";

RULES FOR USING grid-template-areas