
Solution retrospective
I'm glad to have finally picked up the basics of Grid styling
What challenges did you encounter, and how did you overcome them?I was unable to easily guide the grid positioning to use when looking at the reference design image so I drew lines on the image to help visualize the grid system to use.
What specific areas of your project would you like help with?Any suggestions as to how to get the images within the grid to to match that of the design reference image are welcome.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @abhi-zero
Hey John,
I hope you're doing well. I'm a beginner, and I've also completed this project. I understand it can be a bit challenging to make it responsive, but it’s a great project for learning how grids and their styles work.
Using multiple cells (a combination of rows and columns) is definitely a good practice. To position the images correctly, I had to use some tricks. While there might be better methods, here are the approaches I used:
- Modern CSS resets
- Use of margins and padding
- Setting min-height, max-height, min-width, and max-width properties
- Image-specific properties like object-fit, object-position, and object-size
Note that these properties don’t work for background images. For those, you’ll need to use properties like background-size, background-position, and others.
Suggestion: When working with grid layouts, you can simplify your code by using shorthand properties. For example, instead of writing
grid-row-start: 2;
andgrid-row-end: 3;
, you can usegrid-row: 2 / 3
. It’s shorter and easier to read, which can save time and make your code cleaner.I hope this helps, and I’d love to hear about any other methods you found useful!
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