Four card feature section with CSS Grid

Solution retrospective
Grid is cool to play with, took sometime for me to get this very challenge done, had to revisit some sources and learn some new tips and how to make everything work, happy I got the results I have now.. Will be playing around with Grid more often from now on
What challenges did you encounter, and how did you overcome them?Had some challenge defining the rows, I was seeing the layout structure but wasn't sure about how best I'd define the rows lol, especially after I watched a youtube video of Kevin Powell about grid tips where he said a thing about 'not explicitly defining rows unless there's a need to'.. So I was like seeing the rows structure there and how I could span card1 and card4 through row 2 and 4 but was kinda unsure and rethinking other ways I'd get it done without explicitly defining rows, I tried defining my rows after sometime but again my results were coming out bigger than the original layout rows because I used repeat(5, 1fr)
so I kinda looked closely and thought I could bring the 1fr
down a bit since it was bigger than the original layout, so I settled with px
.
Still unsure if defining my rows with a fixed unit (px
) was a good decision but I'd love to hear any tips or ways to make anything better, if at all there's any
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@dar-ju
Hi R4PH431!
My opinion is not the only correct one, but if you fully control your layout with media queries, then you can use px in the project, as you did. Fonts, yes, it is recommended to use relative values, so that there are no problems with screen scaling.
Personally, I layout like you in pixels, font and line-height - in rem. This allows me to work faster and layout close to the design layout.
Perhaps there will be team projects, where the relative value is strictly regulated and you need to be ready for this.
You have a great job!
I have only 2 points that need to be worked on:
- the top part is more of a header or div, for section at least one h2-h6 level header is required
- look at the layout on a screen resolution of 1000px, the column with cards is too narrow and there is a lot of free space around, it is worth adding an additional media query, or making the cards wider
Otherwise everything is great! Good luck in future projects!
Marked as helpful
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