This project has been all around learning how to use CSS grid and how it can be used to align images. 

I’ve learnt how to use the ‘grid-template-columns’ and ‘grid-template-rows’ to align the images across the page. I can use percentages or pixels to determine the size of each image, but this would mean that the images wouldn’t adjust in size depending on whether the page was viewed from a phone or desktop. 

To get around this issue, the ‘repeat auto-fill’ and ‘minmax’ tags can be used. By using the number of pixels (in this case 200px) and a fraction (in this case 1fr), the size of the images will automatically adjust in size depending on the viewport. 

Another feature of CSS grid that I have learnt is how to change the formatting and layout of specific images. This can be done by adjusting the CSS tags for the individual items. The container below has 12 animal emojis and whilst the tags mentioned above could be used to format the container as a whole to make all of the images appear the same, each image’s class can be adjusted to make one or all of the images different from each other. 

In this example, I have chosen to make the panda emoji (of course!)  and also the dragon emoji the largest of the images.