Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Reclamação] Implementação diferente do Figma

Referente ao curso Praticando CSS: Grid e Flexbox, no capítulo Play no Grid e atividade Trocando a posição dos Grid Items

por João Lino Adão Manuel
| 87.4k xp | 71 posts
Chief Operations Officer

Olá, Com os valores do Grid implementado na aula o layout fica diferente do design proposto no figma.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Fiz umas mudanças para chegar ao design que foi passado no figma para garantir o Perfect Pixel (Tentando gerir espetativas na hora da entrega neh kkkk).

Segue o Código:

@media screen and (min-width: 720px) {
  .banner {
    grid-template-columns: 2fr repeat(2, 1fr);
    gap: 16px 24px;
  }

  .banner img:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3;
  }

  .banner img:nth-child(4) {
    grid-column: 3/4;
    grid-row: 1/3;
  }
}

Resultado:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

FIGMA: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Nota: Não sei se a categoria deste post vai para sugestão/reclamação.

2 respostas
por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá, João. Como vai?

Eu conferi no repositório realizado ao final desta aula, e o código está diferente.

Você pode conferir nesse link: https://github.com/alura-cursos/culturama/blob/aula-2/assets/style/grid.css

Repare que não tem esse código que você passou 

  .banner {
    grid-template-columns: 2fr repeat(2, 1fr);
    gap: 16px 24px;
  }

Eu olhei também no repositório das aulas seguintes, mas esse código não está no projeto. Pode conferir por favor?

Aguardo seu retorno para saber se conseguiu resolver o problema! Bons estudos!

solução!
por João Lino Adão Manuel
| 87.4k xp | 71 posts
Chief Operations Officer

Olá Luan Alves, Estou bem obg. Sim, o código da aula é diferente e produz um resultado diferente também que não segue fielmente o layout daí com o conhecimento adquerido aqui nas aulas decidi tentar chegar mais próximo do layout adicionando esse código que mostrei aí acima.