¿Por que se rompe el hader cuando hizo que solo ocupe una columna?

Porque en la parte de arriba tenemos especificado lo siguiente:

 grid-template: 100px 1fr 150px / 200px 1fr;

Lo cual nos indica que deben tener 3 filas y 2 columnas.

Supongo que es algún tipo de error, porque el resto del código esta diciendo "aquí van dos columnas" pero cuando tiene que poner lo que corresponde ahí no lo encuentra (en este caso no encuentra uno de los header y bueno,a falta de información lo hace erróneamente. Si quitas del grid-template-areas: un footer, el left o el contenido sucede lo mismo, se descompagina todo.

No se si habra una explicación mas técnica para explicar el error pero es un error que provocamos.

Así funciona grid. Leonidas lo menciona en los primeros minutos de esta clase. El header debe ocupar dos columnas o tres o más dependiendo de el diseño que se quiera lograr. Si no se especifica esto el navegador entiende que el header no hace parte de las demás columnas y por eso se rompe el diseño.

grid-template-areas: "header header" /* en esta parte se declara que el header ocupe 2 columnas */
                           "left contenido"
                           "footer footer";