Responsive Image Gallery using Html CSS | Instagram Grid layout | 2021 

seen one piece or what?

Yor are welcome

Replace this code .image-gallery .image-box:nth-child(1) { grid-column: span 2; grid-row: span 2; } with .image-gallery .image-box:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; } If this will help you please reply to me.

@@DesignTorch replaced "-child(7n + 1" with "child(1)"..it didnt changed anything... but i have figured out that changing row and coloum span to 1 . works ..thanks

You can download the exact resolution images from Unsplash or you can crop the pictures by using photoshop or any photo editing tool. if you are not satisfied you can ask me again.

@@DesignTorch Thanks. Last question, how can i make them 10x10 ? and responsive to all devices by any chance. Thanks

@@tycoon.miguel, Could you explain to me what is 10x10?

@@DesignTorch The image gallery you make is 3x3 image. How can I make it to 10x10. I mean 10 images in a row

@@tycoon.miguel Play with the grid and change the value of grid-template columns and grid-auto-rows.

Visit This Link: www.mediafire.com/file/h1q7gzi0lb1aa6d/01._Responsive_Image_Gallery_Pure_%2528HTML%252C_CSS%2529.zip/file

what mean of this outucompletion?

@@DesignTorch I thinks my vscode is bug or somethins, it dosent close the when i write, is obnoxsius PD do you hjave this on a repo?

@@sergiomatamalaappel6954 where are you from

@@DesignTorch chile, why?

@@sergiomatamalaappel6954 nothing

Brother, there must be something left. Check it again.

All images have different dimensions. For example: (1920 x 1080), (1920 x 2880), (1920 x 2560), (1920 x 2400), (1920 x 1920).

You can download these images from Unsplash.