Fiquei com uma dúvida durante a aula, ao invés de criarmos várias divs
para estilizar com display: flex;
, poderíamos ter o mesmo resultado com o display: grid;
e ele continuaria responsivo?
Fiquei com uma dúvida durante a aula, ao invés de criarmos várias divs
para estilizar com display: flex;
, poderíamos ter o mesmo resultado com o display: grid;
e ele continuaria responsivo?
Olá, Alice. Tudo bem?
Sim, você pode usar display: grid
para criar o layout do card e ainda mantê-lo responsivo. O grid
é ótimo para criar layouts complexos com facilidade, e pode ser uma ótima alternativa ao flexbox
dependendo do design que você deseja alcançar.
No caso do card, você poderia configurar o display: grid
para ter duas colunas, uma para o texto e outra para a imagem, e duas linhas, uma para a descrição e outra para os botões. Um exemplo de como isso poderia ser feito seria assim:
.card__descrição {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
gap: 1em;
align-items: center;
}
.card__botões {
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
align-items: center;
}
Neste exemplo, grid-template-columns: 1fr auto;
define duas colunas, onde a primeira coluna ocupa o espaço disponível (1fr
) e a segunda coluna é ajustada automaticamente ao conteúdo (auto
). O gap
é usado para adicionar espaçamento entre os itens.
Usar grid
pode tornar o layout mais intuitivo quando você tem um design que se beneficia de um arranjo em linhas e colunas. Além disso, o grid
pode ser mais flexível em certos casos, permitindo um controle mais preciso sobre o posicionamento dos elementos.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)