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()"
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.