grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
No exemplo acima, o valor de 156px seria fixo? Como funcionar a utilização do 1fr como valor máximo (ou mínimo) na função minmax? Obrigado.
grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
No exemplo acima, o valor de 156px seria fixo? Como funcionar a utilização do 1fr como valor máximo (ou mínimo) na função minmax? Obrigado.
hoje, com a Alura e o Google Gemini
Olá, Pedro!
Entendo que a função minmax no CSS Grid pode parecer um pouco confusa à primeira vista, mas vamos desvendá-la juntos!
No exemplo que você citou grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));, o valor de 156px não é fixo, ele é o valor mínimo que cada coluna pode ter. O valor máximo é definido como 1fr.
A função minmax é usada para definir um intervalo de tamanho que uma coluna (ou linha) pode ter. O primeiro valor (156px, no seu exemplo) é o tamanho mínimo, e o segundo valor (1fr) é o tamanho máximo.
O valor 1fr significa que cada coluna vai tentar usar o máximo de espaço disponível, mas sem ultrapassar o espaço total do container. Então, se o container tiver espaço suficiente, todas as colunas terão o mesmo tamanho, ocupando todo o espaço. Mas se o espaço do container for menor, as colunas vão se ajustar para caber dentro dele, respeitando o tamanho mínimo de 156px.
Vamos a um exemplo prático para ficar mais claro:
Imagine que você tem um container de 900px de largura. Se você usar grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));, o navegador vai tentar preencher o container com o máximo de colunas possíveis, respeitando o tamanho mínimo de 156px. Então, ele vai criar 5 colunas de 180px (900px / 5 = 180px), pois 180px é maior que o mínimo de 156px e preenche todo o espaço do container.
Agora, se o container tiver apenas 500px de largura, o navegador vai criar 3 colunas de aproximadamente 166px (500px / 3 = 166.66px), pois 166px ainda é maior que o mínimo de 156px. As colunas restantes serão colocadas nas próximas linhas, pois não há espaço suficiente na primeira linha.
Espero ter ajudado e bons estudos!