enquanto estou no devtools aparemente esta certo, mas quando eu saio a imagem vai pra baixo de novo.
@media (min-width: 1440px) {
.categorias__titulo {
padding-bottom: 1rem;
}
.categoria__container {
display: grid;
gap: 1.8rem;
}
.categorias__lista {
grid-row: 1/3;
}
.categorias__destaques {
grid-column: 3/4;
}
.categorias__imagem {
grid-column: 3/4;
}
}
Oii, Jean! Tudo bem?
Desculpa pela demora em responder a você.
Pude perceber que finalizou o curso de Praticando CSS: Grid e flexbox, espero que tenha gostado do conteúdo. Caso ainda esteja enfrentando o problema relatado acima, peço por gentileza que envie o link do seu projeto contendo todos os arquivos necessários para podermos analisar e te orientar da melhor forma.
Mas para ter um bom ponto de partida, no seu código, você definiu que a imagem deveria estar na coluna 3/4. Ou seja, a imagem deve começar na linha de grade 3 e terminar na linha de grade 4. Se a imagem está indo para baixo, isso indica que ela está sendo deslocada para fora de sua célula designada no grid. E isso pode ocorrer quando o conteúdo em outras células do grid estão grandes ou se o grid não tiver espaço suficiente para acomodar todos os seus itens.
Como sugestão, verifique o tamanho dos outros itens no seu grid, caso estejam grandes tente reduzir o tamanho ou ajustar o tamanho das células no grid.
Outra dica, pode-se usar a propriedade grid-auto-rows para definir um tamanho mínimo para as linhas em seu grid, para garantir que todas as células terão espaços suficientes para os itens.
Caso tenha interesse em explorar mais o grid-auto-rows, deixo o link abaixo da documentação do CSS que aborda mais informações sobre a propriedade, é muito útil para solidificar os conhecimentos.
A página pode abrir em Inglês, caso não se sinta confortável com o idioma, clique com o botão direito do mouse em qualquer parte da página e escolha a opção "Traduzir para o português".
Espero que as dicas sejam um bom ponto de partida. Caso sujam dúvidas compartilhe conosco.
Bons estudos, Jean!