Design comparison
Solution retrospective
I am proud that l was able to complete the challenge as l had difficulties getting started. I didn't really know where to begin but breaking down the challenge and focusing on one problem at a time did help.
What challenges did you encounter, and how did you overcome them?I had problems with the spacing between the columns and actually deciding how many rows l needed for this grid layout. The gap property had effect on the horizontal gap but not on the vertical gap and if anyone has a suggestion on how l can solve the issue, the suggestion will be appreciated.
What specific areas of your project would you like help with?I need to practice using grid layout more as this is a new concept.
Community feedback
- @MikDra1Posted 3 months ago
Nice one 😀
If you are curious how you can do this straight lines on the top of each card here is my tip:
Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.
Hope you found this comment helpful 💗
Good job and keep going 😁😊😉
0 - @dealencardavidPosted 3 months ago
Hi!
Great job! Working with grids can be a bit challenging at first, but once you understand how they work, it can be very rewarding.
You might want to adjust the horizontal gaps a little to make your solution look more like the proposed design.
Here's a tip: you could create a grid class and apply it to the parent component (setting the desired columns and gaps) while using a separate ID for each card. By tweaking the IDs, you can more easily position each card in the desired location.
Hope this helps.
Happy coding!0
Please log in to post a comment
Log in with GitHub
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