Solução para quem tiver problema no grid-gap / gap (correção barra de rolagem)

Fala galera, esse tópico não é de dúvida e sim de solução.

Eu tive um problema ao aplicar o grid-gap e vi em outros dois posts que mais pessoas também tiveram esse problema, como não rola responder nos tópicos eu abri este novo pra ajudar quem tiver o mesmo problema daqui pra frente.

O que acontece: quando a gente aplica o grid-gap nas linhas e colunas, como estas já estão ocupando 100%, nosso layout dá uma quebrada e aplica barra de rolagem vertical e a base do conteúdo invade o rodapé. Pra corrigir é simples: Em vez de definir as linhas e colunas em porcentagens, definimos em frames, Assim:

.destaques {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: .5rem;
  height: calc(100vh - 50px);
}

*Ps.: o grid-gap foi descontinuado, agora é só gap.

Desse jeito serão criadas quatro colunas e três linhas (como no vídeo) mas o próprio grid vai dividir isso, assim quando aplicar o grid-gap o CSS vai fazer as compensações. Dá pra fazer isso mais fácil com a função repeat():

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

Eu não sei se nas próximas aulas vai explicar isso, mas pra já a solução tá aí. Vi isso na documentação da Mozilla.