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

[Dúvida] Este card poderia ser criado com display grid

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?

1 resposta
solução!

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 :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado