Written by CSS Image Gallery
HTML:
html
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="gallery">
<div class="gallery-item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="gallery-item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="gallery-item">
<img src="image3.jpg" alt="Image 3">
</div>
<!-- Add more gallery items here -->
</div>
</body>
</html>
CSS (styles.css):
css
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery-item {
flex: 1 0 200px;
margin: 10px;
}
.gallery-item img {
width: 100%;
height: auto;
}
In the HTML code, you create a div with the class “gallery” to hold your gallery items. Each gallery item is represented by a div with the class “gallery-item” and an img tag inside it.
In the CSS code, we use flexbox to create a responsive gallery layout. The .gallery class applies display: flex to its children and flex-wrap: wrap to make sure the items wrap to a new line when they reach the container’s width.
The .gallery-item class specifies the width of each item using flex: 1 0 200px, which means the items will grow and shrink as necessary but will not exceed 200 pixels in width. The margin: 10px adds some spacing between the items.
The .gallery-item img class sets the width to 100% of the container to ensure the images fit within their respective gallery items while maintaining their aspect ratio.
You can add more gallery items by duplicating the <div class="gallery-item"> section and updating the src and alt attributes of the img tag with the appropriate image information.
Make sure to replace “image1.jpg”, “image2.jpg”, etc., with the actual image URLs or file paths of your images.
Feel free to customize the CSS code to fit your specific requirements, such as adjusting the dimensions, adding hover effects, or adding transitions.
