[Dúvida] DÚVIDA A RESPEITO DO GRID DOS BANNERS

Fala, Rafael! Tudo bom com você?

Pelo que eu entendi, você estruturou a página do zero por não ter conseguido baixar os arquivos iniciais, e se for esse o caso mesmo, meus parabéns, viu! Quanto a sua dúvida, durante o andamento do curso eles tratam essa questão da disposição das imagens, então conforme você for prosseguindo, vai entender como é feito o design. Mas segue meu código de como foi feito, caso você já queira ir dando uma olhada:

.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{
    grid-template-columns: calc(50% - 0.75rem) auto auto;
    column-gap: 1.5;
}

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

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

Espero ter ajudado e um grande abraço!

Opa, Iury. Tudo bem? Comigo está tudo ótimo. Sim, tive que codar o site do zero, pois não consegui acessar o link para baixar o doc ZIP do projeto, mas isso é o de menos. Entendi quase perfeitamente o seu código, bem próximo do que eu fiz. Mas uma única linha do seu código eu não entendi, na tela de 720px na classe ".banner" há a seguinte linha de código: "grid-template-columns: calc(50% - 0.75rem) auto auto;". Admito que fiquei totalmente perdido na parte do "calc(50% - 0.75rem)", poderia me explicar detalhadamente como funciona, para que serve? Pois nunca tinha visto isso. Grato desde já!

Tudo ótimo sim, Rafael, muito obrigado!

Então, essa questão do que você falou do calc, é porque a imagem ocupa 50% da área, enquanto as outras duas ocupam igualmente o restante. A questão é que, colocando somente o 50%, iria passar um pouco da área desejada, porque desconsidera o gap. Então usa o calc pra definir a imagem como 50% da área - metade do gap, que aqui é 1.5rem, então fica calc (50% - 0.75rem).

Espero que tenha ajudado, irmão, e bons estudos!

Fala, Iury. Tudo certo contigo? Espero que sim. Passando aqui para dar o meu feedback final e, fico no aguardo de um último feedback seu também para dar como concluído esse tópico de dúvidas que abri aqui no fórum. Desde quando você respondeu eu não tive como atualizar o meu código e continuar os meus estudos, pois estava fora de casa, por isso a demora. Mas agora já em casa, retomei aos estudos e atualizei o meu código conforme você fez o seu, entretanto, houve ainda um obstáculo para telas de celulares até 719px, mas que com uma simples linha no código eu consegui corrigir. O que fica a minha dúvida: Será que o jeito que as imagens ficaram dispostas aqui no meu site foi culpa minha (algum erro no código geral, já que eu mesmo estruturei tudo)? Ou culpa do meu monitor ser diferente do seu talvez? Ou o seu código para telas de celulares de fato necessita apenas daquela linha (do tópico 3) de código que adicionei?

1. Quando eu atualizei o meu código com o seu que você me mandou para telas de celulares, ficou exatamente assim como mostrado no print 1.1 (conforme a tela crescia até 720px, os espaçamentos e desalinhamentos aumentavam -conforme no print 1.2-):

1.1:

1.2:

2: Para corrigir esses desalinhamentos e cada imagem ocupar seu devido espaço até chegar na tela mínima de 720px, eu apenas adicionei a seguinte linha no código (tópico 2.1), e assim as imagens ficaram alinhadas, como mostra no tópico 2.2:

2.1:

.conteudo__banners img {
    width: 100%;
}

2.2:

Precisei fazer isso apenas para corrigir nas telas de celulares (até 719px), de 720px em diante eu tive que retirar esse código que adicionei, se não iam ficar desalinhadas novamente, sendo assim, não alterei o seu código para telas >= 720px. Agradeço demais sua ajuda, até a próxima!

Fala, Rafael! Tudo certo sim, e com você?

Bacana, cara, eu estava dando uma olhada aqui no código de estilo do curso, porque ele também já veio pronto, e também tem essa questão aí das imagens com width de 100%. Segue aí o código pra você olhar e que sá colocar também no seu:

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Essa é a única parte do código referente ao banner que já veio nativa, e como o seu problema está mais relacionado justamente com o comportamento da imagem quando aumenta a tela, pode ser que seja o que está faltando, principalmente esse object-fit. Pelo que vi, essa propriedade é responsável por fazer com o que o elemento ocupe a área que ocupa, então se enquadra bem na sua questão.

Depois faz o teste aí, irmão, e vê se resolveu. Abraços!

Tudo certo. Melhor agora na verdade, deu tudo 100% certo, se com o width: 100%; já estava bom, com essas edições adicionadas (que já vieram nativas, mas eu não sabia) ficou melhor ainda, perfeito. Obrigado por toda ajuda!

Por nada, meu amigo, bons estudos!