1
resposta

[Projeto] [DASAFIO-GRID] Possível solução para

Eu fiz de dois jeitos para ver qual ficava mais próximo do exemplo do desafio.

.grid-container {
  display: grid;
  grid-template-areas:
    "item1 item2 item3"
    "item4 item4 item3"
    "item5 item5 item6";
  gap: 8px 12px
}
.item1 {
  grid-area: item1;
}
.item2{
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4{
  grid-area: item4;
}
.item5{ 
  grid-area: item5;
}
.item6 {
  grid-area: item6;
} 

segunda solução que encontrei:


/* Responsividade com grid*/
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "item1 item2 item3"
    "item4 item4 item3"
    "item5 item5 item6";
  gap: .5rem 1rem;
}

.item1 {
  grid-area: item1;
}
.item2{
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4{
  grid-area: item4;
}
.item5{ 
  grid-area: item5;
}
.item6 {
  grid-area: item6;
}
1 resposta

Oi Leonidas, tudo bem?

Muito obrigada por compartilhar com a gente as soluções que encontrou. Parabéns por aceitar os desafios, assim você consegue praticar bem e fixar o que viu no curso :D

Continue os bons estudos.

Um abraço.