Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Utilização de <div> para separação da section

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo A dupla HTML e CSS e atividade Grid e continuação

por Pedro Moutinho Lima
| 17.3k xp | 18 posts

Olá, tudo bem? Fiquei com uma dúvida na parte abaixo do HTML:

<section class="container principal">
        <div>
            <h1>Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="/img/Combo.png" alt="O combo+ é a junção do alura+ e o alura língua">
            <a href="wwww.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>
            <a href="www.alura.com.br" class="container__botao botao__secundario">Assinar somente o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
    </section>

Porque nesse caso é necessário usar div para separar a section e o display grid de fato funcionar?

1 resposta
solução!
por Lorena Garcia
| 8260.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi Pedro, tudo bem?

A utilização da tag <div> nesse caso serve para criar um container que envolve todo o conteúdo que está dentro da tag <section>. Isso é importante para que o display grid funcione corretamente, pois ele precisa de um elemento pai para definir as linhas e colunas que serão utilizadas na disposição dos elementos filhos.

Dessa forma, ao utilizar a <div> como container, é possível definir as propriedades do display grid para a classe ".container" e aplicá-las a todo o conteúdo dentro da <section>, garantindo que a disposição dos elementos seja feita de forma organizada e responsiva.

Espero ter ajudado.

Um abraço e bons estudos.