.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.item1{
grid-row: 1/2;
grid-column: 1/2;
}
.item2{
grid-row: 2/1;
grid-column: 2/2;
}
.item3 {
background: #84EEC1;
color: #041833;
grid-column: 3/4;
grid-row: 1/3;
}
.item4{
grid-row: 2/3;
grid-column: 1/3;
}
.item5{
grid-row: 3/4;
grid-column: 1/3;
}
.item6{
grid-row: 3/4;
grid-column: 3/4;
}
Olá Uellinton! Tudo bem com você?
Ao analisar a imagem do resultado da atividade, percebi que os elementos estão distribuídos e posicionados corretamente, mas o container está saindo para fora do body, o que pode causar problemas na exibição. Conforme a imagem:
Para resolver esse problema, basta remover a linha top: 98px; que está dentro do .container no código. Ao fazer isso, o resultado ficará certinho, e o container não irá ultrapassar os limites do body, ajustando-se de forma adequada na página.
Se você tiver mais dúvidas ou precisar de mais ajuda, é só me perguntar!