Want to showcase images in a modern, Pinterest-style layout without using JavaScript or any external libraries? In this blog post, we’ll explore how to create a responsive masonry grid gallery using just HTML and CSS. Whether you’re building a portfolio, a photography site, or simply want a stylish way to present images, this tutorial has you covered.
What You’ll Learn
-
How to use CSS columns to build a masonry layout.
-
How to make your gallery responsive for all screen sizes.
-
How to add simple hover effects for a polished look.
Video Tutorial:
HTML Structure:
The HTML for this project is very straightforward. It consists of a <div> element with the class gallery, which serves as the container for all the images. Inside this div, multiple <img> elements are added — each representing an image to be displayed in the gallery. Each image has a src attribute pointing to its file (like image-1.jpg) and an alt attribute for accessibility and SEO benefits. This kind of structure is clean and semantic, which means it’s easy to understand, easy to maintain, and accessible for both users and search engines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Grid Gallery</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="gallery">
<img src="image-1.jpg" alt="image" />
<img src="image-2.jpg" alt="image" />
<img src="image-3.jpg" alt="image" />
<img src="image-4.jpg" alt="image" />
<img src="image-5.jpg" alt="image" />
<img src="image-6.jpg" alt="image" />
<img src="image-7.jpg" alt="image" />
<img src="image-8.jpg" alt="image" />
<img src="image-9.jpg" alt="image" />
<img src="image-10.jpg" alt="image" />
<img src="image-11.jpg" alt="image" />
<img src="image-12.jpg" alt="image" />
<img src="image-13.jpg" alt="image" />
<img src="image-14.jpg" alt="image" />
<img src="image-15.jpg" alt="image" />
</div>
</body>
</html>
CSS:
The CSS brings the gallery to life by transforming a vertical list of images into a responsive, masonry-style grid. The .gallery class uses the column-count property to define how many columns the images should be split into, creating a visually appealing staggered layout similar to Pinterest. The column-gap adds spacing between the columns, and some padding around the gallery ensures that it doesn’t touch the edges of the browser window.
Each image inside the gallery is styled to take up the full width of its column (width: 100%) and includes a small margin at the bottom for spacing. The display: block property ensures that each image behaves like a block-level element, stacking correctly within the columns. To make the gallery interactive, a hover effect is added using the transform: scale(1.02) property — this slightly enlarges the image when the user hovers over it, creating a subtle but modern animation. The transition property smoothens this effect.
body {
margin: 0;
padding: 0;
}
.gallery {
column-count: 4;
column-gap: 1rem;
padding: 1rem;
}
.gallery img {
width: 100%;
margin-bottom: 1rem;
display: block;
transition: transform 0.3 ease;
}
.gallery img:hover {
transform: scale(1.02);
}
@media (max-width: 768px) {
.gallery {
column-count: 2;
}
}
@media (max-width: 480px) {
.gallery {
column-count: 1;
}
}
