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?