Four card feature using CSS grids

Please log in to post a comment
Log in with GitHubCommunity feedback
- @repro123
Great solution. Not really many things to correct here.
You can center the whole content on the body by:
body { display: grid; place-items: center; } /* OR */ body{ display: flex; align-items: center; justify-content: center; }
Also, imagine if the designer told you that there will be more texts in each card, at some screen sizes, the cards will stretch significantly in height. You can make the
.card-grid
agrid-template-column: repeat(2, 1fr)
and same for the grid-template rows too, at some screen sizes, before going to the desktop design. - @Ariarzg
hi, Great Job. The Design is fluid and responsive.
But, the Typography and its responsiveness can be improved using
clamp()
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