Masonry Grid Layout Example

Are you looking to display a collection of items, especially images, in a visually appealing and organized way without awkward gaps? A masonry grid layout is a fantastic solution for this common design challenge. This tutorial will guide you through creating a compelling Masonry Grid Layout example. You will learn how to arrange elements of varying heights into columns, utilizing space optimally to give your content a modern, Pinterest-like appearance.

How to Create a Masonry Grid Layout Example

Step 1: Include the Masonry Library

First, you need to include the Masonry library. This library handles the complex calculations required to arrange your grid items neatly. Insert this CDN link into the head section of your document.

Step 2: Define Your HTML Structure

Next, set up the basic HTML structure for your grid. You will need a main container for the grid and individual div elements for each grid item. Each item can hold an image or any other content. Notice the `adjust` and `adjust-2` classes which will be used for varying item heights.

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item"><img src="https://picsum.photos/seed/a/400" alt=""></div>
  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/b/400" alt=""></div>
  <div class="grid-item adjust"><img src="https://picsum.photos/seed/c/400" alt=""></div>
  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/d/400" alt=""></div>

  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/e/400" alt=""></div>
  <div class="grid-item adjust"><img src="https://picsum.photos/seed/f/400" alt=""></div>
  <div class="grid-item adjust"><img src="https://picsum.photos/seed/g/400" alt=""></div>
  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/h/400" alt=""></div>

  <div class="grid-item"><img src="https://picsum.photos/seed/i/400" alt=""></div>
  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/j/400" alt=""></div>
  <div class="grid-item adjust"><img src="https://picsum.photos/seed/k/400" alt=""></div>

  <div class="grid-item adjust"><img src="https://picsum.photos/seed/l/400" alt=""></div>
  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/m/400" alt=""></div>
  <div class="grid-item adjust"><img src="https://picsum.photos/seed/n/400" alt=""></div>

  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/o/400" alt=""></div>
  <div class="grid-item adjust"><img src="https://picsum.photos/seed/p/400" alt=""></div>
  <div class="grid-item"><img src="https://picsum.photos/seed/q/400" alt=""></div>

  <div class="grid-item adjust"><img src="https://picsum.photos/seed/r/400" alt=""></div>
  <div class="grid-item"><img src="https://picsum.photos/seed/s/400" alt=""></div>
  <div class="grid-item adjust-2"><img src="https://picsum.photos/seed/t/400" alt=""></div>
</div>
    <script  src="./script.js"></script>

Step 3: Apply CSS Styling

Then, add CSS to style your grid items and images. This styling ensures that your items have a base size and that images fit well within their containers. The `adjust` and `adjust-2` classes are used here to give different items distinct heights, which is key for a dynamic masonry effect.

.grid-item {
  float: left;
  width: 16rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
  height: auto;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

.adjust img {
  height: 17rem;
}
.adjust-2 img {
  height: 25rem;
}

Step 4: Initialize Masonry with JavaScript

Finally, you need to initialize the Masonry script using JavaScript. This tells Masonry which elements form your grid and how they should be arranged. This JavaScript code would typically reside in a file like `script.js`.

// vanilla JS
// init with element
var grid = document.querySelector(".grid");
var msnry = new Masonry(".grid", {
  itemSelector: ".grid-item",
  columnWidth: ".grid-item",
  percentPosition: true
});

To connect your HTML with this JavaScript code, link the script file at the end of your document, just before the closing body tag.

That’s all! Hopefully, you have successfully created a Masonry Grid Layout. If you have any questions or suggestions, feel free to comment below.