具有单像素边框的同位素布局

Question

我正在尝试创建一个单像素边框同位素布局，没有左右外边框。如果您签出以下网址：

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

你会看到我非常接近，只是一些边界没有按预期对齐。

这是到目前为止的LESS/CSS：

* {
          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; }

和 JS

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

Answer 1

添加边距：0到身体;

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