具有单像素边界的同位素布局答案

【问题标题】：Isotope layout with single pixel border具有单像素边界的同位素布局
【发布时间】：2015-06-11 13:49:09
【问题描述】：

我正在尝试创建一个没有左右外边界的单像素边界同位素布局。如果您查看以下网址：

你会看到我已经很接近了，只是有些边框没有对齐。

这是迄今为止的 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
    }
  });

});

【问题讨论】：

标签： javascript jquery css jquery-isotope masonry

【解决方案1】：

在正文中添加边距：0；

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

【讨论】：

对不起，这不是我想要的，身体的边缘还可以。我想在网格上有一个 1px 的边框来分隔每个网格项，但你会从上面的示例中看到，我无法让 1px 的边框完全对齐。