Design comparison
Solution retrospective
Hi!
Another complete project, I used CSS Grid, although my knowledge is still quite basic, I was happy to complete another project with GRID and be more comfortable using it.
I set the height of the cards using the px unit, is that correct?
I also used absolute position to position the side cards, but I'm not sure if this could be a problem because I'm using the css Grid.
Any comments will be appreciated. ;)
Community feedback
- @grace-snowPosted almost 3 years ago
Hi
I’m afraid you’re not grasping the power of grid here… there should be no position absolutes or relatives in this challenge, and the box sizes and spacings should be defined by the grid template itself
I recommend
- one h1, not a h1 then h2 for the page title. It reads as one sentence so should be in the same meaningful element
- using grid for mobile and larger screen layout. It’s fine for a grid to be one column to start with. This allows you to use gap to separate the cards straight away
- try out grid template areas. I think that will help you visualise what you’re trying to do. Sometimes sketching the grid on paper can help you work out what’s needed
- in your grid change first row height to auto (for the intro)
- for the part of the grid with the cards, the grid is missing 2 rows. Draw a grid over the 4 boxes on your paper and you’ll see it needs 4 rows for the cards and three columns.
- remove heights widths and margins from the cards. Let the template define how big the grid areas are and let the cards take up the space defined in that grid.
You might find you need to add a mid sized grid in a media query, see how you get on
Marked as helpful2@HersonmeiPosted almost 3 years agoHi @grace-snow!
Thank you so much for all your observations!
I will apply all the points you mentioned and study the CSS Grid more in depth before moving on to the next project!
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