[Dúvida] A instrutora não explica o porque usar: auto auto auto 1fr

Oi Pedro, tudo bem?

Entendo a sua dúvida, é realmente interessante entender o porquê de certas decisões de código. No caso da propriedade grid-template-rows: auto auto auto 1fr;, ela está definindo a altura das linhas do grid.

Quando usamos auto, estamos dizendo para o CSS que a linha deve se ajustar automaticamente ao conteúdo que ela contém. Portanto, as três primeiras linhas terão a altura necessária para acomodar seu conteúdo.

Já o 1fr (fraction), é uma unidade de medida que representa uma fração do espaço disponível. Nesse caso, a última linha vai ocupar todo o espaço restante após as três primeiras linhas terem se ajustado ao conteúdo.

Se todas as linhas fossem 1fr, todas teriam a mesma altura, dividindo igualmente o espaço disponível. Se fossem todas auto, todas se ajustariam ao conteúdo, não necessariamente ocupando todo o espaço disponível.

Espero que isso esclareça sua dúvida! Lembre-se que a escolha entre auto e 1fr (ou qualquer outra unidade) depende do comportamento que você quer para o seu layout.

Um abraço e bons estudos.