Eu tive que assistir à aula várias vezes para entender e como sempre faço os meus resumos para estudar, resolvi compartilhar o resumo aqui por 2 razões.
A primeira é ajudar outros alunos e a segunda é ser ajudado, caso haja alguma falha no meu entendimento.
O meu ponto de vista:
A função foi explicada na aula partindo do mobile até chegar ao desktop, ou seja, a explicação começou pelo mínimo da função até chegar ao máximo, mas acho que é mais fácil compreender a função, pensando da mesma forma que estamos trabalhando no grid do site que é fazendo desktop primeiro.
Estamos trabalhando com desktop first, ou seja, a configuração padrão é aplicada a todas as telas grandes, em outras palavras, telas com largura superior a 1400px, no caso desse projeto.
Com isso em mente, podemos conceber que praticamente todas as configurações que fizemos em todos os arquivos css do projeto, se aplicam a telas com largura superior a 1400px.
As exceções até o módulo 4 foram o espaçamento entre as colunas nos cartões e a quantidade de colunas ocupadas pelo título do cartão, assim como o alinhamento do título. Alteramos essas configurações em telas inferiores a 1023px.
Sendo assim, a explicação da função minmax será melhor absorvida se for dada usando a mesma lógica da construção do site.
Explicando a função:
É como dizer ao site: comece com 3 colunas que ocupem 100% do espaço da seção de cartões e conforme a largura da tela for diminuindo, diminua a largura dos cartões, quando cada cartão chegar a menos de 348px de largura, passe a ter 2 colunas que continuarão ocupando 100% do espaço da seção.
Exemplificando:
Abri o devtools com resolução de largura de tela de 1400px e comecei a diminuir aos poucos, percebi que a largura do cartão vai diminuindo para se adaptar ao novo tamanho de tela.
Reparei que ao chegar na largura de tela de 1297px, a largura do cartão é exatamente 348px e temos 3 colunas, ao diminuirmos a largura da tela para 1296px, a largura do cartão consequentemente diminui e como atinge um valor de largura menor que o limite estipulado(348px), a seção de cartões passa a ter 2 colunas.
Analisando as larguras:
Para entender o número 1297px, podemos somar a largura de tudo que temos na tela!
Antes de fazermos o cálculo precisamos ter em mente que os cartões ocupam 100% da largura da coluna da seção de cartões, sendo assim, dizer que o cartão tem 348px ou que a coluna tem 348px é a mesma coisa.
Calculando:
Nesse tamanho de tela, cada cartão possui 348px e como são 3, temos 1044px e mais o padding de 1.25rem na esquerda e 1.25rem na direta.
Esse padding foi configurado na classe container.
1.25rem = 20px.
Temos, também, o menu lateral que nessa largura de tela possui 197px, como podemos observar no devtools, além de um padding na esquerda de .5rem e na direita de .5rem.
Esse padding foi configurado na classe menu-lateral.
.5rem = 8px.
1044px(cartões) + 40px(padding) + 197px(menu-lateral) + 16px(padding) = 1297px.
Conclusão:
A largura de 1297px é o limite para a mudança da quantidade de colunas, mas a razão pela qual a mudança ocorre não é a largura da tela do dispositivo, mas sim a largura que cada cartão ou que cada coluna da seção de cartões possui.
Eu conclui que o motivo para a mudança da quantidade de colunas não é a largura da tela, como seria usando media query.
Quando chega a 1296px de largura de tela, não tem mais espaço suficiente para abrigar 3 colunas com o mínimo de 348px cada e então passamos a ter 2 colunas.
Seguindo o raciocínio:
Quando ficamos com 2 colunas, percebemos que cada coluna possui 521.5px de largura e somando temos.
1.043px(cartões) + 40px(padding) + 197px(menu lateral) + 16px(padding) = 1296px
Destrinchando a função:
Mínimo da função → (100%/2, max(348px, 100%/3).
Mínimo do mínimo → (100%/2) → 2 colunas que ocupem 100% do espaço da seção.
Máximo do mínimo → (348px, 100%/3) → A partir de 348px por coluna, divida em 3 colunas que ocupem 100% do espaço da seção.
Máximo da função → (1fr) → Mantenha as 3 colunas de forma que ocupem a mesma fração do espaço da seção.
