Olá Bruno! Tudo bem?
Vamos às suas dúvidas:
Uso da propriedade "grid-area": Não é obrigatório usar a propriedade grid-area para nomear áreas no CSS Grid. Você pode usar o nome da classe diretamente no grid-template-areas, mas o uso de grid-area é considerado uma boa prática, pois separa a lógica de layout da estilização e torna o código mais legível e organizado.
Conflito na designação de colunas: No exemplo que você trouxe, o grid-template-columns define duas colunas com tamanhos 1fr e 3fr. No entanto, o grid-template-areas define quatro áreas horizontais. Isso pode causar confusão, mas o CSS Grid é flexível. Quando as áreas definidas excedem o número de colunas especificadas, o navegador tentará ajustar o layout da melhor forma possível. No caso, as áreas podem ser distribuídas nas colunas existentes, mas é ideal que o número de colunas e as áreas estejam alinhados para evitar comportamentos inesperados.
Espero ter ajudado. Conte com nosso apoio :)
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
