如何向此mansory网格添加固定宽度

Question

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

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

但是我很难理解如何制作固定宽度为1000px的网格

.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
});