1
resposta

O meu já estava certo.

Depois dessa mudança da professora, ficou tudo desajustado. O meu já estava certo, não?

.banner {
display: grid;
gap: 1rem;
}

.banner img:nth-child(1) {
grid-column: 1/3;
}

.banner img:nth-child(4) {
grid-column: 2/3;
grid-row: 2/4;
}

@media (min-width: 720px) {
.banner {
column-gap: 1.5rem;
}

.banner img:nth-child(1) {
grid-column: 1/3;
grid-row: 1/3;
}

.banner img:nth-child(4) {
grid-column: 4/5;
grid-row: 1/3;
}
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá Maurício! Tudo bem?

Entendo a sua preocupação. Parece que o seu código estava funcionando bem antes da mudança. No entanto, a alteração sugerida pela professora tem um objetivo específico: ajustar a proporção das colunas do banner para que a primeira coluna ocupe 50% da largura em telas a partir de 720px, enquanto as outras duas colunas ocupam os 50% restantes.

No seu código original, as colunas parecem estar divididas igualmente, cada uma ocupando cerca de 1/3 da largura. A mudança proposta utiliza a propriedade grid-template-columns com a função calc() para ajustar essa proporção, levando em consideração o espaçamento entre as colunas.

Se o objetivo é seguir o design proposto no projeto finalizado, a alteração faz sentido. Caso contrário, se você prefere manter o design original que você criou, pode optar por não implementar essa mudança. Siga aquilo que achar que ficou mais harmonioso no seu layout.

Espero ter ajudado. Conte sempre com o apoio do fórum! Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado