Masonry - gutter, margin bottom

index.html

<h1>Photos & vidéos du Médoc</h1>

<div class="grid">
  
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item"></div>
  
  <div class="grid-item grid-item--width2">
  <iframe src="https://player.vimeo.com/video/145142344?title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2 grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height2 grid-item--width2">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/BUyB5ZbXvb8" frameborder="0" allowfullscreen></iframe>
  </div>

  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
</div>

Masonry - gutter, margin bottom.markdown

Masonry - gutter, margin bottom

Forked from David DeSandro's Pen Masonry - gutter.

A Pen by Kompuser on CodePen.

License.

script.js

// external js: masonry.pkgd.js

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 280,
  gutter: 20
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>

style.css

* { box-sizing: border-box; }

body { font-family: sans-serif; margin:0 auto;text-align:center;}

/* ---- grid ---- */

.grid {
  background: white;
  max-width: 1200px;
  margin:0 auto;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 100%;
  height: 210px;
  float: left;
  /* vertical gutter */
  margin-bottom: 20px;
  background: #666;
  @media screen and (min-width:600px) {
    width:280px;
    height:210px;
  }
}

.grid-item--width2 { 
  width: 100%;
  height:210px;
  background-color:silver !important;
    @media screen and (min-width:600px) {
    width:580px;

  }
}

.grid-item--height2 { 
  height: 420px;
  background-color:tomato !important;
  @media screen and (min-width:600px) {
    height: 420px;

  }

}

.grid-item:nth-child(1){
  background-image:url("//c1.staticflickr.com/3/2797/4033561023_0237b566d8.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;

}



.grid-item:nth-child(2), .grid-item:nth-child(9), .grid-item:nth-child(13){
  background-image:url("//c1.staticflickr.com/3/2790/4386408277_410b710fb1_z.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;

}


.grid-item:nth-child(5),{
  background-image:url("//c2.staticflickr.com/6/5257/5436078732_9451605d19_z.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;
}




.grid-item:nth-child(3), .grid-item:nth-child(10), .grid-item:nth-child(16){
  background-image:url("//c1.staticflickr.com/5/4064/4365266778_ee17b82761.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;

}

.grid-item:nth-child(4), .grid-item:nth-child(11), .grid-item:nth-child(20){
  background-image:url("//c2.staticflickr.com/6/5214/5436079370_3c28a36ac6_n.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;
    
}