Gostaria de saber se minha resolução está correta?
.agenda__item {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"imagem imagem"
"informacoes atracao";
}
.agenda__item img {
grid-area: imagem;
}
.agenda__item .agenda__informacoes {
grid-area: informacoes;
}
.agenda__item .agenda__atracao {
grid-area: atracao;
}
Olá Gustavo, tudo bem?
Excelente! Essa solução funciona sim, mas repare que se você remover as propriedades grid-template-columns e grid-template-rows, terá o mesmo resultado. Isso porque a grid-template-areas, já está determinando a quantidade de linhas e colunas e dispondo os elementos sem necessidade de cálculo da altura e linha.
Abraços e bons estudos!