Posso deixar dessa forma que fiz? :
.agenda__item {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"imagem imagem"
"data dia"
"data botao";
}
.agenda__item img {
grid-area: imagem;
}
.agenda__item h3 h4 h5 {
grid-area: data;
}
.agenda__item h6 {
grid-area: dia;
}
.agenda__item button {
grid-area: botao;
}
Olá, Gabriel!
Sua solução com grid-template-areas está ótima e é uma excelente forma de organizar o layout.
Em CSS, é normal existirem várias maneiras de chegar ao mesmo resultado. A sua é tão válida quanto a do instrutor. Continue explorando essas alternativas, pois isso é fundamental para o aprendizado.
Bons estudos!
Espero ter ajudado! Bons estudos!
Sucesso ✨