如何向这个砌体网格添加固定宽度

Question

我使用 mansonry.js 有非常相似的布局

https://codepen.io/anon/pen/KrVGox

但我无法理解如何制作固定宽度为 1000 像素的网格

.grid {
  background: red;
  /* center */
  margin: 0 auto;
  max-width: 1000px;
}

添加最大宽度：1000px；打破网格项目以脱离网格或添加宽度：1000px；什么都不做。

Answer 1

你可以试试这个，

CSS 底部边距

.grid-item {
    width: 160px;
    height: 120px;
    float: left;
    /* vertical gutter */
    margin-bottom: 20px;
    background: #D26;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;
}

JS

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 160,
    gutter: 20
});