Esse 1fr no caso, refere-se a 50% do template?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Esse 1fr no caso, refere-se a 50% do template?
Olá Gabriel!
Sim e não, basicamente quando usamos grid-template-columns: 1fr auto;, estamos dizendo que a primeira coluna (1fr) deve ocupar uma fração do espaço restante, enquanto a segunda coluna (auto) deve ajustar sua largura com base no conteúdo que ela contém.
Por exemplo, se o contêiner tem 1000px de largura e o conteúdo da segunda coluna (auto) ocupa 200px, a primeira coluna (1fr) ocupará o restante do espaço, ou seja, 800px. Se o conteúdo da segunda coluna fosse 300px, a primeira coluna ocuparia 700px, e assim por diante.
Então, 1fr é uma unidade flexível que se ajusta ao espaço disponível, e não uma porcentagem fixa como 50%. Portanto, refere-se a uma fração do espaço disponível e não a uma porcentagem fixa, digamos assim. O valor de 1fr depende do número total de frações especificadas no template, ele pode ser 50%, ou se for 3 colunas ele pode ser 33,3%.
Esse artigo tem mais exemplos sobre.
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!