Código CSS:
/* Coloque na sua agenda! */
.agenda__lista {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 1rem;
column-gap: 1.5rem;
}
.agenda__item {
flex-grow: 1;
}
@media (min-width: 720px) {
.agenda__lista {
justify-content: flex-end;
}
}
@media (min-width: 1440px) {
.agenda__lista {
justify-content: center;
}
}
Oii, Guilherme!
Obrigada por compartilhar seu código com a comunidade Alura.
Você fez um excelente uso do Flexbox, com boas definições para o layout responsivo, ajustando a apresentação com as media queries. A configuração do flex-grow na classe agenda__item ajuda a distribuir o espaço de maneira inteligente entre os itens. E, a aplicação das media queries tá bem estruturada, permitindo um ajuste de layout conforme a largura da tela. Isso faz a experiência do usuário ser mais fluida, o que é fundamental para o design responsivo.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!