3-column preview card component using CSS Grid and Flexbox

Solution retrospective
I'm proud of the clean layout structure and how I managed the responsiveness using only CSS Grid and Flexbox. Next time, I would explore adding more accessibility features like ARIA attributes and improve keyboard navigation.
(pt-BR): Tenho orgulho da estrutura limpa do layout e de como gerenciei a responsividade usando apenas CSS Grid e Flexbox. Da próxima vez, pretendo explorar mais recursos de acessibilidade como atributos ARIA e melhorar a navegação por teclado.
What challenges did you encounter, and how did you overcome them?One challenge was managing the layout breakpoints to ensure the cards stacked nicely on smaller screens. I overcame this by using a mobile-first
approach and refining the grid
behavior with media queries.
(pt-BR): Um dos desafios foi gerenciar os pontos de quebra do layout para garantir que os cartões se empilhassem corretamente em telas menores. Resolvi isso adotando uma abordagem mobile-first
e ajustando o comportamento do grid
com media queries.
I'd appreciate feedback on how to further improve accessibility and semantic HTML usage. Also open to suggestions on optimizing the responsiveness or any visual details that could be cleaner.
(pt-BR): Gostaria de receber sugestões sobre como melhorar a acessibilidade e o uso de HTML semântico. Também estou aberto a melhorias na responsividade ou detalhes visuais que possam ficar mais refinados.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Carlos Alberto da Silva's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord