Por qué hizo referencia a las clases de esta manera: .header {} , .left{} … etc si en realidad las clases se llamaban “item header” , “it...

Una forma de verlo es de la siguiente manera: cuando pones un espacio entre las palabras, se considera que es otra clase, aunque este dentro de las mismas comillas, es decir: class = "item header", es igual que si pusieras: class= "item" class="header", pero no tienes la necesidad de poner class a cada rato... a su vez, cuando hay mas de 2 palabras para un solo nombre de clase, se usa el guion, es decir: si usasemos class="item-header", al momento de usar la hoja de estilos si tendriamos que invocar la clase como .item-header{ }, pero como no es el caso, se entiende que son 2 clases separadas, una de item y otra de header/contenido/footer o el nombre que prefieras... y por tanto la mandas llamar por separado. la funcionalidad de la clase "item" en este caso es editar en la hoja de estilos a los 3 elementos sin tener que repetir las lineas como tendriamos que hacer en caso de poner por separado cada clase, a final de cuentas terminarias escribiendo de mas, y si tuvieramos mas elementos, serian muchas lineas innecesarias que podemos resumir con esta funcionalidad :D, espero haberme explicado bien jsjs

Con el respeto del comentario de @jcsoftia, creo que esta equivocada.

esos nombres que están en frente de la propiedad grid-area no tienen nada que ver con las classes definidas dentro del HTML. Tienen que ver con los nombres de lineas establecidos dentro del CSS en el elemento padre (.container) -> ahi dentro se define una propiedad llamada grid-template-areas: "header header" "left contenido" "footer footer";

Basicamente le estas diciendo en la primera fila pone el header a que ocupe las 2 columnas (por eso repites header header) Despise en la segunda fila pon el left (que seria como la barra lateral) y pon el contenido y finalmente abajo en la tercera fila pon el footer a que ocupe otra vez 2 columnas igual que el header (por eso pone footer footer).

Despise vas a cada clase (Ej: .header {y aquí dentro le asignas el grid-area: "nombre que definiste dentro de grid-template-areas"})

Hola Akira, lo que pasa es que cada div tiene dos clases, el item y su correspondencia si es header, left, contenido o footer La clase item está siendo utilizada para estilos que todos los div comparten y así solo usar una clase para todos pero, para usar el grid-area ello no nos sirve y optamos por la otra clase y así que haces referencia a esa clase.