砌体中心项目

Question

我正在尝试将 Masonry 网格中的项目居中。我已经阅读并尝试了很多关于将网格本身居中的相关帖子，但对这些项目没有任何作用。

到目前为止我尝试过的：

添加/删除排水沟
添加/删除 fitwidth 选项
试图在容器上添加 margin 0 auto
试图在容器上添加/删除宽度。

我创建了一个片段来说明问题

$(document).ready(function() {
  var $container = $(".grid");
  $container.masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 20,
    fitWidth: true,
  });
  $container.imagesLoaded(function() {
    $container.css({
      opacity: 0,
      visibility: "visible"
    }).animate({
      opacity: 1.0
    }, 300);
    //$container.show();
    $container.masonry('layout');
  });
});

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  width: 1260px;
  border: solid 2px red;
}

.grid {
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  padding: 0 0 2em;
  visibility: hidden;
  background: rgba(0, 255, 0, .1);
}

.grid-item,
.grid-sizer {
  display: block;
  padding: 1.5em;
  margin: 0 0 1.5em;
  background: #fff;
  width: 23%;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<body>
  <main id="content" class="content" role="main">
    <div class="wrapper">
      <section class="grid">
        <div class="grid-sizer"></div>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>
      </section>
    </div>
  </main>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      var $container = $(".grid");
      $container.masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 400,
        fitWidth: true,
      });
      $container.imagesLoaded(function() {
        $container.css({
          opacity: 0,
          visibility: "visible"
        }).animate({
          opacity: 1.0
        }, 300);
        //$container.show();
        $container.masonry('layout');
      });
    });
  </script>
</body>

如您所见，在绿色部分左侧有一个小绿色space，但最后一个和右侧之间有很多space。我怎样才能在那里拥有平等的 space ？我很确定我遗漏了一些明显的东西，但我找不到。

Answer 1

我终于设法通过删除容器上的百分比宽度来做到这一点。我试过属性 percentPosition: true 但它与 fitWidth 不兼容，正如文档所说：

fitWidth: true does not work with element sizing with percentage width. Either columnWidth needs to be set to a fixed size, like columnWidth: 120, or items need to have a fixed size in pixels, like width: 120px. Otherwise, the container and item widths will collapse on one another.

这是工作代码的示例：

$(document).ready(function() {
  var $container = $(".grid");
  $container.masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 20,
    fitWidth: true,
  });
  $container.imagesLoaded(function() {
    $container.css({
      opacity: 0,
      visibility: "visible"
    }).animate({
      opacity: 1.0
    }, 300);
    //$container.show();
    $container.masonry('layout');
  });
});

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  width: 1260px;
  border: solid 2px red;
}

.grid {
  /*max-width: 1260px;
  width: 100%;
  */
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  padding: 0 20px 2em;
  visibility: hidden;
  background: rgba(0, 255, 0, .1);
}

.grid-item,
.grid-sizer {
  display: block;
  padding: 1.5em;
  margin: 0 0 1.5em;
  background: #fff;
  width: 300px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<body>
  <main id="content" class="content" role="main">
    <div class="wrapper">
      <section class="grid">
        <div class="grid-sizer"></div>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>
      </section>
    </div>
  </main>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      var $container = $(".grid");
      $container.masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 400,
        fitWidth: true,
      });
      $container.imagesLoaded(function() {
        $container.css({
          opacity: 0,
          visibility: "visible"
        }).animate({
          opacity: 1.0
        }, 300);
        //$container.show();
        $container.masonry('layout');
      });
    });
  </script>
</body>

砌体中心项目

Masonry center items

jquery

frontend

jquery-masonry