Isotope layout with single pixel border

Question

I am trying to create a single pixel border isotope layout, with no left and right outer borders. If you check out the following url:

http://codepen.io/ashhitch/pen/zGwYXR/

You will see I am pretty close, just some of the borders on don't align as they should.

This is the LESS/CSS is have so far:

* {
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


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

.grid {
  background: #DDD;
  position:relative;
  border-top: solid 1px #fff;
  border-top: 1px solid #333;
  overflow: hidden;

  &-item {
  padding: 20px;
  background-color: #ccc;
  width: 25%;
  width: ~"calc(25% + 2px)";
  height: 350px;
  border: 1px solid #333;
  border-top: 0;
  margin-right: -1px;
  margin-left: -1px;


    &:last-child {
      border-bottom: 1px solid #333;
    }
}

}


.grid-item--height2 { height:450px; }

And the JS

$(function() {

  $('.grid').isotope({
    layoutMode: 'packery',
    itemSelector: '.grid-item',
    packery: {
      gutter: 0
    }
  });

});

Answer 1

Add margin:0 to body;

body {
font-family: sans-serif;
margin:0;
}