I've been trying to set up a masonry layout for a portfolio website but the images don't seem to align in the grid properly as items tend to overlap each other. Can someone point out if I'm utilizing the jQuery correctly or if it's a different issue I'm running into? Thanks!

I made sure I'm calling the right selectors, the items seem to keep overlapping.

jQuery

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

CSS

.grid {
  max-width: 1200px;
}

.grid-item {
  width: 200px;
  height: 180px;
  float: left;
}

img {
  max-width:200px;
  height: auto;
}

Here's how I linked the .js, which are both in my project folder

<head>
  <meta charset = "utf-8">
  <link rel="stylesheet" href="./style.css" type:"text/css">
  <title>Victor Zhang</title>

  <script src="./masonry.pkgd.min.js" type = "text/javascript"></script>
  <script src="./masonryjQuery.js" type = "text/javascript"></script>
</head>

Rest of my HTML

  <div class="grid">

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Venmo-Final.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/EQT.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/ezgif-4-99d82a0722.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Homepage+1+-+Standard+Web.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/steam+app+gif.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Bounce-Morph---Final-Cut_2.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/BART+Map+Final-02.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/arkangel2.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/CIG.png">
      </div>
  </div>
</body>

I figured that should be enough for the masonry grid to work but my images are overlapping and not filling in the spaces correctly. Do I need to define more explicit parameters in my CSS? Thanks for the help, I really appreciate it.

1 Answers

0
Sujit On

By any chance if you have a luxury of choosing pure CSS implementation of masonry layout over the jQuery plugin, check this out. See the way CSS column property is used there.

Meanwhile, if the jQuery plugin you're using is also internally following the same approach, I suspect 'float' might be the culprit!