Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Desafio: Grid da li da seção agenda

Boa tarde! Realizei o desafio proposto, porém utilizei outro código, gostaria de verificar se desta forma também estaria correto Segue:

.agenda__item{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "imagem imagem"
        "mes nome"
        "data botao"
        "hora botao"
    ;
}

.agenda__item img{
    grid-column: 1/3;
    grid-area: imagem;
}
    
.agenda__item h3{
    grid-area: mes;
}
.agenda__item h4{
    grid-area: data;
}
.agenda__item h5{
    grid-area: hora;
}
.agenda__item button{
    grid-area: botao;
}
1 resposta
solução!

Olá, Eliane, como vai?

Seu código está funcional e entrega o resultado proposto no desafio, o que é ótimo. No entanto, há uma maneira mais compacta de alcançar o mesmo layout, como demonstrado no código da instrutora. A simplificação do código pode facilitar a manutenção e a leitura.

No seu código, você utilizou grid-template-areas para posicionar os elementos, o que é válido, mas pode ser simplificado. A instrutora faz o mesmo posicionamento sem a necessidade de definir áreas, apenas utilizando grid-column para a imagem e deixando os outros elementos se ajustarem naturalmente nas colunas e linhas definidas.

Mas é importante destacar que, mesmo utilizando uma abordagem diferente da instrutora, você conseguiu alcançar o layout desejado, demonstrando um bom entendimento do CSS Grid. Isso mostra sua capacidade de adaptação e criatividade ao resolver problemas.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)