Three column responsive Masonry grid

Question

I want to show 3 column masonry image grid on Desktop and single column on device. Following plunk works on mobile but it fails on Desktop (lot of gap between two images). I have tried setting width in percent but no luck

https://plnkr.co/edit/g75ClJU4VJWgJbfiKYdu?p=preview

.block{
    float: left;
    margin: 2px 2px 2px 2px;
    width: calc(33.33% - 17px);
}

.block img {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 500px) {
  .block {
      float: left;
      margin-bottom: 25px;
      width: calc(100% - 17px);
  }
}

Thanks in advance

MSK

Answer 1

You will probably want to only make use of media queries and remove float.

The design below is very flexible and allows for

• One column on mobile screens
• Two columns on tablet
• Three columns on small desktop screens / laptops
• Four columns on large desktops
• Five columns on 4k screens.

The rest of the comments are inside the snippet.

body {
  background: #131418;
}


/* Step 1: start with resetting some defaults */

* {
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}


/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/

.grid {
  text-align: center;
  max-width: 95vw;
  margin: 2.5vw auto;
}


/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.grid-item {
  padding: 5px;
  box-sizing: border-box;
}


/* Step 4: Add media queries (subjective) to make the whole grid resposive. */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 1700px) {
  .grid-item {
    width: 25%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 20%;
  }
}

<!-- Made possible by the great work of David DeSandro @ https://masonry.desandro.com -->

<!-- Part 1: Add the scripts -->

<!-- Step 1: Let's start by loading jQuery. jQuery is not required for masonary to function but makes things easier  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

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


<!-- Part 2: Create the grid -->


<!-- Step 1: Start with a the main grid wrapper-->
<div class="grid">

  <!-- Step 2: Add grid items--->

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg">
  </div>

  <!-- Step 3: repeat...--->
  <div class="grid-item">
    <img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg">
  </div>

  <div class="grid-item">
    <img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" />
  </div>

  <div class="grid-item">
    <img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" />
  </div>

  <div class="grid-item">
    <img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" />
  </div>

</div>

<!-- Part 3: the script call -->

<!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. -->
<script>
  var $grid = $(".grid").imagesLoaded(function() {
    $grid.masonry({
      itemSelector: ".grid-item"
    });
  });
</script>