Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Fiz a seção de dispositivos de outra forma

No HTML:

<section class="container_dispositivos">
        <h2 class="dispositivos__titulo">Disponível nos seus dispositivos favoritos</h2>
        <div class="dispositivos">
            <img src="./img/tv.png" alt="Desenho de uma TV" class="dispositivos__imagem">
            <h3 class="dispositivos__subtitulo">TV</h3>
        </div>
        <div class="dispositivos">
            <img src="./img/computador.png" alt="Desenho de uma TV" class="dispositivos__imagem">
            <h3 class="dispositivos__subtitulo">Computadores</h3>
        </div>
        <div class="dispositivos">
            <img src="./img/celular.png" alt="Desenho de uma TV" class="dispositivos__imagem">
            <h3 class="dispositivos__subtitulo">Celulares e tablets</h3>
        </div>
    </section>

No CSS:

.container_dispositivos {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    margin: 6em 10em;
}

.container_dispositivos h2 {
    grid-column: 1/4;
    grid-row: 1/2;
}

.dispositivos__titulo {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 1em;
}

.dispositivos__subtitulo {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-top: 1em;
}

Gostaria de saber se há problema no uso do GRID nesses casos ou tem que ser utilizado o Flexbox?

1 resposta
solução!

Oi estudante, tudo bem?

Parabéns por praticar, ficou super legal! A solução da Alura é uma das possibilidades, mas não é única e não precisa se prender à ela.

Muito obrigada por compartilhar com a gente o seu código.

Abraços e bons estudos.