Как я могу добавить фиксированную ширину к этой сетке

Question

У меня очень похожий макет, как это с помощью mansonry.js

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

Но у меня возникают проблемы с пониманием, как сделать сетку с фиксированной шириной 1000 пикселей

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

Добавление max-width: 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
});