Creating a Masonry Image Gallery with HTML and CSS

Workspace Desktop
  • 31 Jan 2024
  • w3builders
  • Tutorials and How To Guides

Creating a Masonry Image Gallery with HTML and CSS

In the ever-evolving world of web design, creating visually appealing and responsive image galleries is a common challenge. One popular layout style is the Masonry layout, where images are arranged in a grid with varying heights, creating a dynamic and modern look. In this blog post, we'll guide you through the process of building a simple Masonry image gallery using HTML and CSS.

Getting Started:

To begin, let's set up the basic HTML structure. Create an index.html file and include the necessary metadata and a link to your CSS file:

html

<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Masonry Grid CSS Style</title>
</head>


<body>
  <div class="container">
    <div class="box"><img src="https://images.pexels.com/photos/1547813/pexels-photo-1547813.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/6543903/pexels-photo-6543903.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/5679496/pexels-photo-5679496.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/5304809/pexels-photo-5304809.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/5870532/pexels-photo-5870532.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/5399402/pexels-photo-5399402.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/2777671/pexels-photo-2777671.png?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/5403478/pexels-photo-5403478.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/4732162/pexels-photo-4732162.png?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/4335249/pexels-photo-4335249.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/1982483/pexels-photo-1982483.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/3254429/pexels-photo-3254429.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/3209221/pexels-photo-3209221.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/545063/pexels-photo-545063.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/262896/pexels-photo-262896.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/2568410/pexels-photo-2568410.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/1266105/pexels-photo-1266105.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/6467908/pexels-photo-6467908.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/6554702/pexels-photo-6554702.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/6791447/pexels-photo-6791447.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/6939694/pexels-photo-6939694.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
    <div class="box"><img src="https://images.pexels.com/photos/4711052/pexels-photo-4711052.jpeg?auto=compress&cs=tinysrgb&w=800" alt="image" loading="lazy"></div>
  </div>
</body>
</html>

Creating the Masonry Layout:

Now, let's define the structure of our Masonry gallery. We'll use a container with a specified number of columns, and each image will be wrapped in a div with the class item:

css

*:before,
*:after,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.container {
  width: 1400px;
  margin: 20px auto;
  columns: 4;
  column-gap: 20px;
}


.container .box {
  width: 100%;
  margin-bottom: 10px;
  break-inside: avoid;
}


.container .box img {
  max-width: 100%;
  border-radius: 15px;
}


@media (max-width: 1200px) {
  .container {
    width: calc(100% - 40px);
    columns: 3;
  }
}


@media (max-width: 768px) {
  .container {
    columns: 2;
  }
}


@media (max-width: 480px) {
  .container {
    columns: 1;
  }
}

In this example, we've set up a three-column layout, but you can adjust the column-count property to fit your design preferences.


Creating a Masonry image gallery is a fantastic way to showcase your visuals in an engaging and modern manner. By utilizing HTML and CSS, you can achieve a responsive and aesthetically pleasing layout. Experiment with different column counts, spacing, and image sizes to find the perfect balance for your gallery. Happy coding!

More Blog Categories

Analytics and Data
Case Studies
Freelancer vs Firm
Content Creation
Digital Marketing Tips
Interviews and Expert Opinions
Industry News and Updates
SEO Strategies
Tips for Small Businesses
Technology and Tools
Tutorials and How To Guides
Web Design Principles
Web Development Trends

More Blogs from us