我可以用Masonry实现这种布局吗？

Question

我这样想：

.grid {
  width: 99%;
  border: 1px solid #ccc;
}
.grid a, .grid .grid-sizer {
  display: inline-block;
  width: 20%;
  padding-bottom: 20%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.grid a.wx2, .grid .grid-sizer.wx2 {
  width: 45%;
}
.grid a.hx2, .grid .grid-sizer.hx2 {
  padding-bottom: 66%;
}
.grid a.wx2.hx2, .grid .grid-sizer.wx2.hx2 {
  padding-bottom: 33%;
}

并且

$(function () {
    $('.grid').masonry({
        columnWidth: '.grid-sizer',
        itemSelector: '.grid-item',
        percentPosition: true,
        isFitWidth: true,
        gutter: 10
    });
});

但它没有使用全宽，

知道我缺少什么吗？

参见jsfiddle

https://jsfiddle.net/6dL7x8uk/1/

Answer 1

是的，你可以。 小提琴缺少很多东西。 我会这样做：

<div class="wrap">
<div class="children">

http://codepen.io/damianocel/pen/ZbvVmX