Resizing images rules of thumb

1

I have a grid of images on my pen that should be 4 columns wide. I was able to achieve this, but it seems that the images are too large, making the grid stretch farther than the width of the page. I’m a little fuzzy when it comes to the types of measurements I should use when resizing images in CSS. Are there any rules of thumb to keep in mind when trying to fit images on a page?

I also want the grid to fit in the middle of the page with some spacing in between each grid element. How would I go about doing that?

I apologize if this post seems a little scattered, I’m taking on my first project since completing the Responsive Web Design curriculum.

Pen so far.

2

It’s a good question. There might be recipes but I took the chance to play a bit.

I’ve made this codepen with an exercise for you on the bottom of the css(scss) tab. If you like, fork it and play with the code.