Here we we'll write some CSS code and JS code to manipulate a html content. So, look at the below source code
Here, we have created a div element with the class "gallery" to serve as the container for our image gallery. Within this container, we have added four “img” elements to serve as our gallery images.
We have also added CSS styles to our gallery container and images to make them responsive. The gallery class has display set to "flex" and flex-wrap set to "wrap", allowing our images to wrap to a new row when they reach the end of the container. We have also set the width of our images to 25% of the container width minus 10 pixels to create a margin between the images.
So if we open our html file in our browser then we can find the below output.
This image height and width is depend on your image ratio.
That's it for today. I hope you've enjoyed this tutorial. Thanks for reading. 🙂
No comments yet…