Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Minmax

Referente ao curso CSS: construindo layouts com Grid, no capítulo Grid layout responsivo e atividade Responsividade na seção cartões horizontais

por Rodrigo Leonardo Gomes
| 47.6k xp | 19 posts
.secao-horizontal .secao__cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(80%/2, max(350px, 80%/3)), 1fr));
}

Eu tenho uma dúvida sobre os parenteses : Por que após a (min(80%/2 não há um parenteses de fechamento logo em seguida? ( o fechamento se apresenta apenas após o fechamento do max.) 

.secao-horizontal .secao__cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(80%/2), max(350px, 80%/3), 1fr));
}

Por que não pode ser assim?

1 resposta
solução!
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Olá, Rodrigo, tudo bem?

A função minmax no CSS é usada para definir um intervalo de tamanho que uma coluna ou linha de grade pode ter. Ela aceita dois argumentos: o primeiro para o tamanho mínimo e o segundo para o tamanho máximo.

No seu código, você está usando a função min e max dentro do minmax. A função min retorna o menor dos argumentos, e a função max retorna o maior. No seu caso, a função min está definindo o tamanho mínimo que suas colunas de grade podem ter, e a função max está definindo o tamanho máximo.

O código min(80%/2, max(350px, 80%/3)) está dizendo o seguinte: o tamanho mínimo que uma coluna pode ter é o menor valor entre 80% do tamanho do contêiner dividido por 2 e o maior valor entre 350px e 80% do tamanho do contêiner dividido por 3.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!