Entrar Ainda não tem acesso?
1
resposta

[Projeto] Dúvidas - Variáveis

Referente ao curso CSS: construindo layouts com Grid, no capítulo Finalizando o AluraCast e atividade Uso das variáveis de CSS

por Thaislanny Medeiros de Araújo
| 25.3k xp | 4 posts

Bom dia, tudo bem?

Fiz as alterações conforme a aula, mas acho que não funcionou.. Os cartões voltaram a ficar em apenas uma coluna. Conforme foto anexada.

.secao__cartoes {
    display: grid; 

    /*Largura mínima da coluna*/
    --largura-minima-da-coluna: 100%/2;


    /*Largura máxima da coluna*/
    --max-largura-maxima-da-coluna: 100%/var(--quantidade-maxima-de-colunas);
    --largura-maxima-da-coluna: max(var(--min-largura-maxima-da-coluna), var(--max-largura-maxima-da-coluna));

    --minimo: min(var(largura-minima-da-coluna), var(--largura-maxima-da-coluna));

    grid-template-columns: repeat(auto-fit, minmax(var(--minimo), 1fr)); /*não entendi mto isso */
}

.secao-horizontal .secao__cartoes {
    --quantidade-maxima-de-colunas: 3;
    --min-largura-maxima-da-coluna: 348px;
  /* display: grid; 
   grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(348px, 100%/3)), 1fr)); não entendi mto isso */
}

.secao-vertical .secao__cartoes {
    grid-column: 1/3 ;
    --quantidade-maxima-de-colunas: 6;
    --min-largura-maxima-da-coluna: 165px;
    /*display: grid; 
   grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(165px, 100%/6)), 1fr)); */
}
1 resposta
por Ana Paula Lemes Fredrich
| 86.3k xp | 7 posts

Olá, Thaislanny!

Vou tentar explicar e corrigir o código com base no que você forneceu.

Primeiro, parece haver um erro de digitação em algumas variáveis, você está usando var(largura-minima-da-coluna) em vez de var(--largura-minima-da-coluna).

A propriedade grid-template-columns define as colunas da grade e a função repeat(auto-fit, minmax(minimo, 1fr)) é usada para criar um número flexível de colunas com largura mínima e máxima especificadas. No entanto, as variáveis em CSS devem ser prefixadas com --, então deve ser var(--minimo) em vez de var(minimo).

Aqui está uma versão corrigida do seu código:

css Copy code .secao__cartoes { display: grid; --largura-minima-da-coluna: 100%/2; --max-largura-maxima-da-coluna: 100%/var(--quantidade-maxima-de-colunas); --largura-maxima-da-coluna: max(var(--largura-minima-da-coluna), var(--max-largura-maxima-da-coluna)); --minimo: min(var(--largura-minima-da-coluna), var(--largura-maxima-da-coluna)); grid-template-columns: repeat(auto-fit, minmax(var(--minimo), 1fr)); }

.secao-horizontal .secao__cartoes { --quantidade-maxima-de-colunas: 3; --min-largura-maxima-da-coluna: 348px; }

.secao-vertical .secao__cartoes { grid-column: 1/3; --quantidade-maxima-de-colunas: 6; --min-largura-maxima-da-coluna: 165px; }

Verifique se as variáveis CSS estão corretamente definidas e que as classes .secao-horizontal e .secao-vertical estão sendo aplicadas corretamente aos elementos pai onde você deseja controlar o layout dos cartões. Certifique-se também de que o HTML e a estrutura do seu documento estejam corretos, pois isso pode afetar a exibição dos cartões.

Espero ter ajudado um pouco. ^-^