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;
}