Photo Grid Codepen challenge

Recently I’ve got an email with invitation for weekly codepen challenge. This time I’ve decided to give it a try as it seems like nice thing to try my CSS skills.

Task was to implement grid with photos. For this I’ve used this guide.

What I learned

object-fit - it’s about resizing of the img element to fill out container that such tag is. It also maintains aspect ration - so in case of image being larger it will crop image to content.

flex-grow - it is used with flexbox to tell how much of remaining space the element can take. In most cases it has numerical values.

filter: grayscale(80%) - I’ve used it on hover to apply grayscale on images.

You can check my codepen here