Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Sugestão] Variáveis

Boa noite turma!

Estou com um duvida referente as variaveis declaradas na aula, fiz igualzinho ao da instrutora porem meu VSCode não reconhece as mesmas como variaveis e tambem não cheguei a verificar a propria instrutora declarando pois não sei se isso pode ser erro do meu VScode ou ela vai declarar na proxima aula, como ainda não tenho muita noção das proporções fico meio perdido de quais valores preciso declarar no style para que o sistema reconheça. segue o codigo css

CSS

.secao__cartoes
{
    display:grid;

    /* LARGURA MINIMA DA COLUNA*/
    --largura-minima-da-coluna:100%/2;


    /*LARGURA MAXIMA 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(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;
    /* display:grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%/2 , max( 348px, 100%/3)),1fr));*/
}

Estou aberto a sugestões.

2 respostas
solução!

Olá. Notei algumas diferenças entre os nossos códgos.

dentro de "secao__cartoes" você parece ter adicionado um "var" extra na variável "--minimo", o meu está da seguinte forma:

.secao__cartoes {
    display: grid;

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

    /*largura maxima 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));
}

No mais, esse curso está realmente confuso e eu espero ter te ajudado!

Realmente ocorreu um "var extra" na variável "--minimo". Ocorreu comigo uma vez ao utilizar o autocompletar do VSCode. O meu não chegou dar erro porque eu percebi a tempo que estava ficando diferente do da professora, é só digitar cada palavra sem usar a sugestão de completar do VScode.