Creio que seja a nav que esteja atrapalhando na divisão dos elementos

Segue o código em css:

:root{ --vermelhosangue: rgb(143, 28, 28); --creme:rgb(209, 186, 122); } /Estilização conteudo principal/ .caixa{ align-items: flex-end; display: flex; justify-content: center; }

.elementos__gallo{ display: grid; grid-gap: 0.2rem; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 25% 25% 25% 25%; } .titulo__principal__gallo{ color: var(--vermelhosangue); font-size: 40px; text-align: center; font-weight: bold; margin: 60px 0px; align-items: center; }

.titlebotton{ color: var(--vermelhosangue); text-align: center; font-size: 25px; font-weight: bold; }

.especificacao{ align-items: center; color: var(--vermelhosangue); font-size: 15px; padding-top: 05px;

}

/Navegação Conteudo principal/

nav a{ text-decoration: none; }

.categorias__gallos :hover { color: var(--creme); border-color: var(--creme); } .categorias__gallos :hover li { font-size: 35px; }

.categorias_gallo_link :first-child{ grid-column: 1 / 2; grid-row: 1 / 1; } .categorias_gallo_link :nth-child(2){ grid-column: 2 / 3; grid-row: 1 / 1; }

.categorias_gallo_link{ display: inline-block; text-align: center; width: 20%; padding: 30px 15px; margin: 10px 0px; box-sizing: border-box; border: 3px solid var(--vermelhosangue); border-radius: 15px; }

Oi Dante, tudo bem?

Desculpa a demora em dar um retorno, você ainda está precisando de ajuda? Se sim preciso de umas informações:

Sua dúvida não está em um curso em específico, você poderia informar de qual curso é e também mandar o seu HTML completo aqui? Assim podemos copiar e testar melhor.

Você pode usar a opção de inserir bloco de código</>, assim podemos visualizar melhor seu código.

Um abraço e bons estudos.

Olá Lorena, estou bem e você

Olha com algumas revisões de conteúdo, consegui organizar.

O código em Html:

   <section class="elementos">
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Musculação</h2>
                        <p class="especificacao__botton">Exercitação muscular</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Jiu-Jitsu</h2>
                        <p class="especificacao__botton">Arte Marcial Japonesa</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Jiu-Jitsu Kids</h2>
                        <p class="especificacao__botton">Arte Marcial Japonesa (infantil)</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Taekwondo</h2>
                        <p class="especificacao__botton">Arte Marcial Sul Coreana</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Boxe</h2>
                        <p class="especificacao__botton">Pugilismo</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Muay Thai</h2>
                        <p class="especificacao__botton">Arte Marcial Tailandesa</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Capoeira</h2>
                        <p class="especificacao__botton"> luta afro-brasileira</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">KickBoxing</h2>
                        <p class="especificacao__botton">Conjunto de Artes Marciais</p>
                    </div>
                     <div class="categorias__gallo">
                        <h2 class="title__botton">FitDance</h2>
                        <p class="especificacao__botton">Dança de passos coreografados</p>
                    </div>
                    <div class="categorias__gallo">
                        <h2 class="title__botton">Zumba</h2></a>
                        <p class="especificacao__botton">Movimentos de danças latinas</p>
                    </div>
    </section>

Código em Css:

        .elementos{
    display: grid;
    grid-gap: 0.2rem;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 25% 25% 25% 25%;
    padding: 30px 80px;
    position: relative;
    margin-top: 5%;
}
.categorias__gallo{
border: 3px solid var(--cinza);
border-radius: 15px;
box-sizing: border-box;
display: inline-block;
margin: 20px 30px;
padding: 5% 0;
text-align: center;
    width: 75%;
}

.categorias__gallo:last-child{
    display: flex;
    flex-direction: column;
    grid-column: 2 / 2;
    grid-row: 4 / 4;
    justify-content: center;
}

.categorias__gallo:hover { 
    border-color: var(--vermelhosangue);
    color: var(--vermelhosangue); 
    transition: 0.20s;
}
.title__botton{
color: var(--cinza);
font-size: 30px;
font-weight: bold; 
text-align: center;
}   

.title__botton:hover{
    color: var(--vermelhosangue); 
    transition: 0.20s;
}
.especificacao__botton{
align-items: center;
color: var(--cinza);
font-size: 20px;
padding-top: 05px;
}

.especificacao__botton:hover{
    color: var(--vermelhosangue); 
    transition: 0.20s;
}

No final das contas, tive que tirar pq não tem mais estas modalidades na academia hahahahah, mas valeu a pena pois aprendi bastante coisa.

Continuo com dificuldade na questão do grid-columns e grid-rows depois que determino a quantidade de espaços dentro da section. Neste projeto deu certo, em alguns outros sim um pouco de dificuldade.

Desde já agradeço a ajuda