Esse 1fr no caso, refere-se a 50% do template?
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!