Ambas as abordagens que você e o professor utilizaram podem ser válidas, dependendo do resultado desejado. No entanto, existem diferenças nas propriedades usadas em cada uma das abordagens.

Na sua abordagem, você está usando a propriedade grid-template-areas para definir as áreas do grid. Isso permite especificar o layout de uma maneira mais visual, atribuindo nomes às áreas e, em seguida, associando esses nomes aos elementos filhos. No entanto, é importante observar que você precisa ter os elementos corretamente aninhados dentro da estrutura do HTML para que o grid funcione corretamente com essa abordagem.

Na abordagem do professor, ele está usando a propriedade grid-column para definir as colunas que o elemento deve ocupar no grid. Com grid-column: 1/3;, o elemento de imagem está ocupando as duas colunas do grid. Essa abordagem é mais direta e não requer o uso da propriedade grid-template-areas.

Ambas as abordagens podem funcionar, mas é importante garantir que os elementos HTML estejam corretamente estruturados e que as propriedades CSS sejam aplicadas de acordo.

Para determinar qual abordagem é mais adequada para o seu caso específico, leve em consideração a estrutura do seu HTML, a flexibilidade que você deseja em relação ao posicionamento dos elementos e a compatibilidade com outros estilos e layouts existentes no seu projeto.