Gallery

Using HTML, CSS, JAVASCRIPT

Create a webpage named Gallery that is:

1. Lightbox gallery, When the webpage originally loads up it will include all the images in a grid
2. The grid will be responsive so based on the window of the device the number of columns will change for example on 14 inch laptop it will have a grid of 2 columns full of images. On a 20 inch monitor the grid will be 3 columns, on a phone the grid will be 1 column and so on.
3. When a user scrolls through the images and clicks on one image it will expand. Now the user can click on the next and previous buttons to see all images. If they press the x button on top right, the expanded version will clear and the grid view of all images will return
4. Have a hover effect on the images when its on grid view
5. The page can include between 30-50 images but this answer doesnt need to have all those images as long as it is clear to follow and modifiable
6. Please include all necessary files and comments on the code to understand and follow along.
7. If bootstrap or any other libraries are used please make it clear on how to correctly use it.
8. If anything is unclear please let me know thank you!