带砖石的响应式网格答案

【问题标题】：Responsive grid with masonry带砖石的响应式网格
【发布时间】：2014-10-11 21:33:43
【问题描述】：

我想构建一个响应式砌体网格，例如 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 中的装订线时，网格会按我的意愿工作，但它会在大断点处显示 2，在中断点处显示 1。如何使用边距水平分隔文章？

【问题讨论】：

为了让我的工作，我不得不使用 box-sizing:border-box，结合不超过 1 个小数点的尺寸，即使那样，50% 也不会一直工作，直到我达到 49.9%，并且有一个名为 .gutter-size 的选项。让它与流畅且响应迅速的布局一起工作是一件非常痛苦的事情。我一定已经阅读了 10 次文档并尝试了所有 Dezandro 的 CodePens。
此外，加载的图像插件和谷歌字体加载器必须包括在内（所有这些都在大量文档中进行了解释），因为没有它们加载的字体和图像会使布局无法正确布局，直到这些是与脚本一起加载的。
@Christina 感谢您的 cmets，我发现下面的答案是正确的。我希望它有帮助:)

标签： responsive-design grid sass margins masonry

【解决方案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.
  }
}

【讨论】：