Achei o uso das variáveis útil, porém achei muito confusa a maneira como foram criadas.
Solucionado
Achei o uso das variáveis útil, porém achei muito confusa a maneira como foram criadas.
Oi Luanna, tudo bem?
Muito obrigada pelo seu feedback, ele ajuda muito a gente melhorar nos cursos futuros.
Lembrando que ao final do curso você pode deixar um comentário falando sobre o que mais gostou e/ou o que precisa melhorar e também atribuir uma nota ao curso.
Para te ajudar com a sua dúvida, temos esse artigo "Construa um CSS mágico com variáveis nativas", que recomendo muito a leitura. E também temos esse Alura+ "Como as variáveis CSS transformam meu projeto?".
Um abraço e bons estudos.
Também não consegui entender :/
o motivo da confusão pra mim foi a lógica da função minmax, onde você pode setar uma valor mínimo e máximo para o mínimo e para o máximo se quiser, ou seja, tinhamos o valor mínimo do mínimo e o máximo do mínimo e a partir disso definimos o tamanho ocupado e a quatidade de cards que apareceriam de acordo com o espaço disponível, no projeto ela mesmo fala que dava pra resolver aquilo usando media queries, mas que iria fazer de uma forma diferente usando as variáveis, pra mim ficou mais confuso mesmo.
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.
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.
É 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.
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.
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.
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.
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.
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
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.