Solucionado
Olá! Acho que estou confundindo as coisas...
@media (min-width: 1440px) {
.categorias {
display: grid;
grid-template-columns: calc(50% - 0.75rem);
column-gap: 1.5rem;
row-gap: 1rem;
}
.categorias__titulo:nth-child(1) {
grid-column: 1/3;
}
.categorias__lista:nth-child(2) {
grid-column: 1/2;
grid-row: 2/4;
}
.categorias__destaque:nth-child(3) {
grid-column: 2/3;
grid-row: 2/3;
}}
Olá Adyna, tudo bem?
Em programação existem vários meios de chegarmos em um mesmo resultado, testei sua solução e vi que funciona corretamente!
Excelente! Continue praticando :)
A única divergência no resultado é que como você não está aplicando altura nas linhas do grid, o elemento imagem não está alinhado.
Existe um espaço em branco sobrando abaixo da imagem.
Para resolver isso, é preciso aumentar a altura da linha de cima, para isso adicione a propriedade grid-template-rows: auto 1fr auto; ou simplesmente grid-template-rows: auto 1fr; no elemento .categorias.
Você ficou com alguma dúvida? Se sim, estamos por aqui.
Espero ter ajudado, abraços!
Olá, Bia!
Muito obrigada pelo retorno! Vou corrigir esse errinho.
<3