Boa tarde,
Não entendi como o auto-fit age nesse caso. Como ele sabe quantas colunas precisa ter em cada tamanho de tela?
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!