Boa tarde,
Não entendi como o auto-fit age nesse caso. Como ele sabe quantas colunas precisa ter em cada tamanho de tela?
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!
Boa tarde,
Não entendi como o auto-fit age nesse caso. Como ele sabe quantas colunas precisa ter em cada tamanho de tela?
Olá, Pedro!
Compreendo que a função auto-fit pode ser um pouco confusa no início. A função auto-fit em CSS é usada para preencher automaticamente o espaço disponível na grade com o máximo de colunas possível, respeitando o tamanho mínimo definido.
No código que você está estudando, a linha que define as colunas é a seguinte:
grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(348px, 100%/3)), 1fr));
O auto-fit está dentro da função repeat(), que cria um número automático de colunas de acordo com o espaço disponível. O auto-fit irá criar tantas colunas quanto couberem no espaço disponível, respeitando o tamanho mínimo definido pela função minmax().
A função minmax() define um tamanho mínimo e máximo para as colunas. No caso, o tamanho mínimo é definido pela função min(100%/2, max(348px, 100%/3)), que escolhe o menor valor entre 50% da largura total (100%/2) e o maior valor entre 348px e um terço da largura total (100%/3).
Portanto, o auto-fit não "sabe" a quantidade de colunas em cada dimensão de tela, ele apenas cria o máximo de colunas possíveis dentro do espaço disponível, respeitando o tamanho mínimo definido.
Espero que essa explicação tenha esclarecido suas dúvidas. Se ainda tiver alguma dúvida, por favor, não hesite em perguntar. Espero ter ajudado e bons estudos!