Dificuldades com posicionamento em Css Grid

Oi, Dante! Tudo bom?

Estou com dificuldade de aplicar os trechos de código pra testar aqui o que está acontecendo, já que está usando uma abordagem diferente da dos vídeos (inclusive parabéns pela iniciativa, é muito bacana fazer isso pra reforçar os conhecimentos).

Pra pegar o grid você precisará determinar o display: grid pro elemento pai (não achei essa parte então acho que o código do tópico não tá completo). E também está sendo aplicado o mesmo grid-row pra ambos botões (de 2/2), então os dois estariam ocupando o mesmo espaço. Faz sentido?

Acho que ficaria mais fácil pra mim testar o que está acontecendo se eu tivesse o código completo, você consegue criar um repositório pra isso ou enviar respondendo o tópico mesmo? Ai consigo entender melhor a ideia do grid nessa parte :D

Olá Professora Mônica, tudo bem sim e com você?

Subi o projeto para o GitHub, segue o link do repositório https://github.com/DanteCavalcanteSantos/HTML-e-Css-Praticando-Alura-.git

Criei um ReadMe informando mais sobre dúvida e agradecendo pela sua ajuda!

Excelente semana para ti Professora! =D

Oi, Dante! Tudo bem comigo também, obrigada pelo retorno, agora eu consigo visualizar melhor o que tá acontecendo :D

Você aplicou o display:grid no seu código em dois locais: na classe .cabecalho__conteudo e na .cabecalho__banner.

O elemento com classe .cabecalho__banner é a imagem do Combo+, então pra ela não vai precisar colocar o display dela como grid pois você não precisa posicionar nada dentro dela, e sim ela no seu grid. Você pode tirar essa declaração na linha 59 do styles.css

Já pontuado isso, vamos focar no grid do .cabecalho__conteudo, que está aplicado na sua div que abrange todos elementos dessa primeira seção. Podemos chamar ela de pai de todos (hehe) e ela está estruturada assim:

Ou seja, um grid dividido em duas colunas e quatro linhas. Você definiu isso ao declarar essa parte no CSS dessa classe:

    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25% 25% 25%;
`

Partindo desse ponto nós precisamos interpretar que ele vai tentar inserir cada elemento filho em cada quadradinho. Os filhos dele no seu código são:

• A img com classe cabecalho__banner
• O h1 com classe cabecalho__titulo
• A img com classe cabecalho__combo
• A section com classe cabecalho__botao

Mas por que os botões ficam junto? Pois quem está sendo posicionado no grid é a section com classe cabecalho__botao, que é filha direta do cabecalho__conteudo onde foi criado o grid.

Ainda assim, a section com cabecalho__botao não é pai dos botões. Ela é pai da nav com classe nav__botao. Olha só:

<section class="cabecalho__botao">  // Pai
      <nav class="nav__botao">    // Filho
             <a class="a__botao">Assine por 12x de R$ 120,00*</a>
             <a class="a__botao">Assinar somente o Alura+</a>
       </nav>
       <p class="cabecalho__aviso">*O preço pode variar caso a
        assinatura seja feita em outros planos.</p>   // Filho
</section>

Assim como a nav é filha da section, os botões são filhos da nav.

Como vamos resolver pra posicionar esses elementos corretamente com o grid pra ficar igual ao Figma?

Uma das maneiras é inserir a propriedade display: grid na classe nav__botao. Assim ele vai quebrar em duas linhas os dois elementos de âncora:

O problema (pra mim) é que mesmo ajustando isso a linha três do grid principal dessa tela (o da div com classe cabecalho__conteudo) fica vazia, então os botões ficam muito distantes da imagem.

E isso você consegue posicionando a section cabecalho__botão que contém eles dentro pelas colunas e linhas do grid. Assim como você fez com os outros com o auxílio das propriedades grid-row e grid-column:

.cabecalho__botao {
    text-align: center;
    grid-row: 3 / 4;
    grid-column: 1/1;
}

Dessa maneira a section irá ocupar a coluna 1 e a linha 3.

É meio chatinho esse esquema do grid, mas basicamente ele inicia no primeiro valor e terminar um valor antes do último. Por exemplo, no grid row 3/4 ele entende que é pra começar na linha 3 e terminar na linha 3.

Espero que eu tenha te ajudado a entender melhor :D

Olá Professora Mônica, fico feliz que esteja bem!

Os elementos ficaram posicionados corretamente e agradeço muito a sua ajuda. Eu li e irei reler para fixar o conteúdo da sua explicação.

Eu entendi as informações sobre elemento pai e filho e isso também é uma dificuldade que tenho de identificar, por isso os erros de aplicação das atribuições dos valores nas classes erradas.

Também apliquei o Grid na classe dispositivos, então é uma ótima maneira de praticar tanto identificar elementos pais e filhos e também como trabalhar com posicionamento entre linhas e colunas.

Mais uma vez, agradeço imensamente pela ajuda!