Duvida sobre repeat, MinMax, Min e Max

Ao usar repeat, vi o seguinte codigo:

grid-template-rows: repeat(3, auto) 1fr;

Aqui tudo bem. Entendi que nesse caso seria como se eu tivesse auto 3x.

Mas e no codigo abaixo?

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

Nao consegui entender como o repeat se encaixa.

Ja sobre o MinMax, deixa ver se eu entendi direito! Eu acho que tanto o min como o max, tambem tem seu minimo e maximo, eh isso? Quando voce coloca...

min(80%/2, max(350px, 80%/3)) O minimo do "min", seria o que esta em negrito. O maximo do min, seria o que esta no escrito no max.

Ja no max, o minimo do max seria 350px e o maximo seria 80%/3. Estou pensando corretamente?

Ja o 1fr, seria o maximo da funcao minmax, sendo que o minimo seria tudo que esta dentro de min, eh isso? Caraca.... Oh rolo doido! kkkkkkk

E pra finalizar, gostaria de saber se o MIN eh o mesmo que MIN-CONTENT e o MAX eh o mesmoque MAX-CONTENT? Pesquisei mas nao consegui achar nada. Grato

Oi Edifran, tudo bem?

No primeiro código que você mostrou, grid-template-rows: repeat(3, auto) 1fr;, o repeat está sendo usado para repetir a palavra "auto" três vezes. Isso significa que você terá três linhas com altura automática e, em seguida, uma linha com altura fracionada (1fr).

Já no segundo código, a situação é um pouco mais complexa. O repeat está sendo usado em conjunto com o minmax para definir a largura das colunas do grid. Vou explicar passo a passo:

repeat(auto-fit, minmax(min(80%/2, max(350px, 80%/3)), 1fr)): o auto-fit faz com que as colunas se ajustem automaticamente de acordo com o espaço disponível no contêiner.
minmax(min(80%/2, max(350px, 80%/3)), 1fr): o minmax define a largura mínima e máxima das colunas. No caso, a largura mínima é calculada como 80% dividido por 2 ou 350px, o que for maior. A largura máxima é 80% dividido por 3. E por fim, 1fr define que a largura máxima é igual à largura mínima.

Sobre sua pergunta se o MIN é o mesmo que MIN-CONTENT e o MAX é o mesmo que MAX-CONTENT, a resposta é não. O MIN e o MAX são funções do CSS para definir valores mínimos e máximos, enquanto MIN-CONTENT e MAX-CONTENT são palavras-chave que definem o tamanho mínimo e máximo do conteúdo dentro de um elemento.

Espero ter esclarecido suas dúvidas.

Um abraço e bons estudos.