Solucionado
Utilizei o grid template areas e o grid item.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5%;
grid-template-areas:
"item1 item2 item3"
"item4 item4 item3"
"item5 item5 item6";
}
.item1{
grid-area:item1;
}
.item2{
grid-area:item2;
}
.item3 {
grid-area:item3;
background: #84EEC1;
color: #041833;
}
.item4{
grid-area:item4;
}
.item5{
grid-area:item5;
}
Oi, Juliano, tudo bem?
Muito obrigado por compartilhar a solução para este projeto.
Gostaria de mostrar também outra forma de resolver este desafio, nela utilizamos duas propriedades. A primeira é a grid-row adicionando dois valores divididos por uma barra (/), sendo o primeiro valor a posição do grid-row-start que indica a linha do grid na qual o elemento deve começar a ser posicionado e o grid-row-end que indica a linha do grid na qual o elemento deve terminar o seu posicionamento. A segunda é a grid-column que recebe os mesmos parâmetros da grid-row, mas realiza o posicionamento em relação às linhas que dividem as colunas.
Dessa forma o código seria escrito da seguinte maneira:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap:8px;
}
.item3 {
background: #84EEC1;
color: #041833;
grid-row:1/3;
grid-column:3/4;
}
.item4{
grid-row: 2/3;
grid-column: 1/3;
}
.item5{
grid-row: 3/4;
grid-column: 1/3;
}Perceba que não posicionamos todos os elementos, pois os demais se adequam aos locais que restam dentro do grid, para obter o resultado esperado na atividade.
Para entender melhor os valores colocados no grid-rowe no grid-column deixo um esquema com as linhas de grid que utilizamos para verificar as posições iniciais e finais de cada elemento.
Note que para formar um grid com três linhas e três colunas, precisamos criar quatro traços para definir a "grid cell", ou seja, a célula que se refere ao espaço interno criado no cruzamento das linhas.
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!
Obrigado rodrigo pela resposta completa. Ficou muito mais claro para mim, pois posso reduzir código, sem a necessidade de alinhar todos os elementos, que um não pode substituir o outro