O auto-fit juntamente com o minmax entendi que ajusta o valor das 3 colunas entre o valor mínimo de 200px e a fração para ocupar o espaço disponível. Não entendi muito bem o comportamento com o auto-fill, se o valor máximo é 1 fr, como ele decide que não deve aumentar a largura das 3 colunas e apenas manter o espaço livre?
1
resposta
resposta
auto-fill e minmax
Quando combinamos auto-fill com minmax em um layout de grade CSS, estamos especificando que o navegador deve preencher o contêiner com o máximo de itens possível, e que cada item deve ter uma largura mínima (minmax) de 200px e uma largura máxima de 1 fração do espaço disponível (1fr). Isso significa que o navegador tentará encaixar o máximo de itens possível na grade, mantendo cada item com pelo menos 200px de largura e distribuindo o espaço restante igualmente entre eles.
Se o valor máximo é 1fr, isso significa que o navegador deve distribuir o espaço disponível igualmente entre os itens que estão preenchendo a grade. Quando o número de itens excede o espaço disponível, o navegador não aumentará mais a largura das colunas além do especificado em 1fr. Em vez disso, ele manterá o espaço livre entre os itens, garantindo que cada um deles tenha pelo menos 200px de largura de acordo com o valor mínimo especificado.
Portanto, o comportamento do auto-fill em combinação com minmax é garantir que o espaço disponível seja preenchido com o máximo de itens possível, mantendo cada item com pelo menos 200px de largura e distribuindo o espaço restante igualmente entre eles, até atingir a largura máxima especificada em 1fr.