
four card feature card using next/tailwind with flexbox and grid
Design comparison
Solution retrospective
successfully using css grid
What challenges did you encounter, and how did you overcome them?didn't really use css grid before, so needed some time to figure out the offset layout of the cards. looked at some resources and ultimately a fresh view of the problem made me able to solve it quite quickly
Community feedback
- P@amine-can-codePosted 15 days ago
I noticed that the live preview of your project isn't currently working. Could you take a look and check what might be going wrong? I'm really eager to see your implementation in action, especially since you've tackled the challenge using CSS Grid.
It's impressive to see you opt for CSS Grid in your solution, it's a powerful tool for building complex layouts. When I first saw the challenge, I also considered using Grid, but I ended up using Flexbox instead. It was quite straightforward, I just wrapped the second and third cards in a div and played around with flex-col and flex-row. Although Flexbox handled it well, I know Grid offers more control and capabilities for intricate designs.
Congratulations on mastering such a robust tool! I'm looking forward to when you get the live preview issue sorted out so I can appreciate your work fully. Remember, the more you practice and experiment, the more skilled you'll become. Keep up the great work!
1@fuergloriaPosted 14 days ago@amine-can-code thanks for your kind comment! I fixed the link, so now you should be able to see the live site. Yeah CSS Grid was definetely out of my comfort zone, but as you say its a powerful tool worth knowing. I'm sure you'll get the hang out of it, too! I found the examples under https://cssgridgarden.com/ really helpul to get a better understanding of how it works.
0
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