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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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 :)