Question

我想建立一个响应式砌体网格，如THIS

我有这个HTML

<div class="js-masonry" data-masonry-options='{ "gutter": 20 }'>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

和SCSS

article{
width: 100%;
float: left;

    @include breakpoint(medium) {
        width: 50%;
    }

    @include breakpoint(large) {
        width: 33.33333%;
    }
}

当我删除html中的daclared网格时，网格按照我想要的方式工作，但是有了它，它在大断点处显示2，在中间显示1。如何使用边距水平分隔文章？

Answer 1

问题是，masonry.js为元素添加了一个边距，使元素宽度为50％+ 20px，并且可以很大地适合一行。

解决方案是通过在一行=包装中制作装订线+元素，使元素和装订线适合您的包装。如果你有一个灵活的布局，这将是一个问题，因为masonry.js只需要一个固定的px作为装订线大小。

因此，如果（在您的示例中）您将元素设置为固定宽度，这将没有问题。但是masonry.js有一个解决方案;如果您将水槽设置为固定宽度而不是元素，masonry.js将使用该元素的宽度。因此灵活的解决方案可能是这样做：

<div class="js-masonry" 
  data-masonry-options='{ "gutter": ".gutter-sizer", "itemSelector": "article"}'>

  <div class="gutter-sizer"></div>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

和Scss

article {
  width: 100%;
  float: left;
  @include breakpoint(medium) {
    width: 49.2%;
  }
  @include breakpoint(large) {
    width: 32.26%;
  }
}
.gutter-sizer {
  width: 0%;
  @include breakpoint(medium and large) {
    width: 1.6%; //About 20px on a regular monitor at full width.
  }
}

响应网格与砌体

1 个答案: