Design comparison
SolutionDesign
Community feedback
- @saul-gustavoPosted 4 days ago
Hola, revise tu código html y css y se entiende lo que intentaste hacer, pero te recomiendo que para tener un diseño como el de la imagen, uses CSS Grid Áreas, con estas podrás poner cada card en una posición especifica para que te de un buen diseño.
Aqui te doy un ejemplo:
.container { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "card-one card-one card-two card-three" "card-four card-five card-five card-three"; gap: 20px; }
Lo anterior me funciono a mi, su gustas puedes ver mi solución para este desafió.
¡Buen trabajo amigo!
Marked as helpful0 - @andersongomes001Posted 5 days ago
Add this part of CSS in the style.css
body { display: flex; align-items: center; justify-content: center; }
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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