[Dúvida] A Grid da Seção

Fiz uma pequena alteração removendo a virgula e voltou a funcionar agora está desta forma:

.secao {
    display: grid;
    align-items: end;
    row-gap: 2rem;
}

.secao-horizontal .secao-vertical {
    grid-template-rows: 70px auto;
}

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

Também aproveitei e removi as virgulas do arquivo Cartao.css

.secao-horizontal .cartao {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 3rem 0.9rem;
    column-gap: 1.25rem;
}

.secao-horizontal .cartao__imagem {
    grid-area: 1 / 1 / 4 /2;
}

.secao-horizontal .cartao__botao{
    grid-area: 2/3/3/4;
}

.secao-horizontal .cartao__titulo {
    grid-area: 2 / 2 / 3 /3;
}

.secao-horizontal .cartao__player {
    grid-area: 3/ 2 /4 /3;
}

Agora estou em duvida qual a diferença usando a virgula e sem usar? Lembro que em outras aulas ensinaram que para chamar outra classe deveríamos utilizar a virgula.

Oi Kawã! Tudo ok contigo?

Sim, é mais ou menos nesse caminho mesmo, no caso o uso da vírgula é para evitar a repetição de código, ou seja,

Em:

.classe1,
.classe2 {
    margin: 1rem;
}

É o mesmo que eu escrever:

.classe1 {
    margin: 1rem;
}

.classe2 {
    margin: 1rem;
}

É para evitar código repetido. Agora o uso de elementos para se referir a elementos relacionados é um pouco diferente. Por exemplo:

1. Uso de > (Filho):

   .container__flex > .flex-element {
       margin: 2rem;
   }
   

   Aqui nesse caso, não é uma ideia de repetição de estilos para 2 classes, e sim, que somente a classe .flex-element que for filha da classe .container__flex, ou seja, que estiver dentro dela vai receber os elementos. Assim, mesmo que tenhamos 2 elementos com a mesma classe mais em locais diferentes, somente os que atendem a condição recebem o estilo, exemplo, para esse html:

   <section class="container__flex">
       <p class="flex-element">Texto qualquer</p> <!-- Recebe o estilo -->
       <p class="flex-element">Texto qualquer</p> <!-- Recebe o estilo -->
       <p class="flex-element">Texto qualquer</p> <!-- Recebe o estilo -->
   </section>
   <p class="flex-element">Texto qualquer</p> <!-- Não recebe o estilo -->
   

   Exemplo extra:

   .container > .elemento {
       color: red;
   }
   

   O html seria assim:

   <div class="container">
       <div class="elemento">Texto Vermelho</div> <!-- Recebe o estilo -->
       <div>
           <div class="elemento">Texto normal</div> <!-- Não é filho direto -->
       </div>
   </div>
   <div class="elemento">Texto normal</div> <!-- Não é filho direto -->
   

2. Uso de + (Adjacente):

   .elemento + .outro-elemento {
       border-top: 1px solid #000;
   }
   

   O seletor + seleciona elementos que são imediatamente precedidos por um elemento especificado. No exemplo acima, estamos estilizando o elemento com a classe .outro-elemento que é adjacente (imediatamente após) a um elemento com a classe .elemento. O estilo será aplicado apenas ao primeiro .outro-elemento que aparecer diretamente após qualquer .elemento.

   Exemplo de HTML:

   <div class="elemento">Elemento 1</div>
   <div class="outro-elemento">Borda superior</div> <!-- Recebe o estilo -->
   <div class="outro-elemento">Não recebe o estilo</div>
   

3. Uso de ~ (Irmão Posterior):

   .elemento ~ .outro-elemento {
       font-weight: bold;
   }
   

   O seletor ~ seleciona todos os elementos que são irmãos posteriores de um elemento especificado. No exemplo, estamos estilizando elementos com a classe .outro-elemento que são irmãos posteriores de um elemento .elemento.

   Exemplo de HTML:

   <div class="elemento">Elemento 1</div>
   <div class="outro-elemento">Texto em negrito</div> <!-- Recebe o estilo -->
   <div class="outro-elemento">Texto em negrito</div> <!-- Recebe o estilo -->
   <div class="elemento">Elemento 2</div>
   <div class="outro-elemento">Texto normal</div> <!-- Não recebe o estilo -->
   

4. Uso de espaço ( ):

   .container .elemento {
       color: blue;
   }
   

   Quando usamos o seletor de espaço ( ), estamos especificando que queremos estilizar o elemento que é descendente de outro elemento. No exemplo acima, estamos estilizando o elemento com a classe .elemento que está dentro (é descendente) de um elemento com a classe .container.

   Exemplo de HTML:

   <div class="container">
       <div class="elemento">Texto Azul</div> <!-- Recebe o estilo -->
       <div>
           <div class="elemento">Texto Azul</div> <!-- Recebe o estilo -->
       </div>
   </div>
   <div class="elemento">Texto Normal</div> <!-- Não recebe o estilo -->
   

5. Recomendações de Uso:

   • Espaço ( ): Recomendado quando você deseja estilizar elementos que são descendentes dentro de um contexto mais amplo, sem se preocupar se são filhos diretos ou não. Útil para estilos que se aplicam de forma mais genérica.

   • Filho (>): Recomendado quando você quer estilizar elementos que são filhos diretos de um elemento específico. Útil quando você quer ser mais específico e limitar a aplicação dos estilos apenas aos elementos que são imediatamente filhos do elemento pai.

Esses exemplos devem ajudar a visualizar como os estilos são aplicados com base nos seletores CSS mencionados.

Se tiver dúvidas eu estarei por aqui!

Abraços e bons estudos.

Muito obrigado agora consegui compreender totalmente, forte abraço mestre e feliz natal.

Fico feliz em ter ajudado, dei uma ajeitada nos exemplos, mas acredito que de para entender melhor agora.