Bom dia, gostaria de uma explicação detalhada sobre o seguinte código css:
grid-template-columns: repeat(auto-fit, minmax(min(80%/2, max(350px, 80%/3)), 1fr));
achei confuso usar o "max()" dentro da função "min()" e ambos dentro da "minmax()"
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Bom dia, gostaria de uma explicação detalhada sobre o seguinte código css:
grid-template-columns: repeat(auto-fit, minmax(min(80%/2, max(350px, 80%/3)), 1fr));
achei confuso usar o "max()" dentro da função "min()" e ambos dentro da "minmax()"
Oii Rafael, tudo bem?
O código que você compartilhou é usado para definir o layout de uma grade CSS. Em particular, ele tá definindo como as colunas dessa grade devem ser organizadas.
grid-template-columns: repeat(auto-fit, minmax(min(80%/2, max(350px, 80%/3)), 1fr));
grid-template-columns: É uma propriedade CSS que define o número e o tamanho das colunas em uma grade.
repeat(auto-fit, ...): A função repeat é usada para repetir um padrão de tamanhos de coluna. auto-fit é um valor que automaticamente preenche o número de colunas de acordo com o espaço disponível.
minmax(min(80%/2, max(350px, 80%/3)), 1fr): A função minmax define um intervalo para o tamanho da coluna. O tamanho da coluna será automaticamente ajustado para algum valor neste intervalo, dependendo do espaço disponível.
min(80%/2, max(350px, 80%/3)): Esta é a parte mais complicada acredito eu. Aqui, definimos o tamanho mínimo que uma coluna pode ter. O tamanho mínimo será o menor valor entre 80%/2 e max(350px, 80%/3).
max(350px, 80%/3): Aqui, definimos que o valor a ser considerado será o maior entre 350px e 80%/3.
1fr: É o tamanho máximo que uma coluna pode ter. 1fr representa uma fração do espaço disponível.
Então, o código tá criando um layout de grade onde o número de colunas é automaticamente ajustado para preencher todo o espaço disponível, e o tamanho de cada coluna é flexível dentro de um intervalo definido.
Um abraço e bons estudos.