css框/网格布局不正确

因此，我试图在我的网站上设置一个盒子类型的布局，但是盒子没有正确安装到位（我希望盒子插入的地方有间隙）。基本上，我希望我的盒子都能很好地配合在一起，每个盒子之间有10像素的边距。我已经设置了一个关于它当前正在做什么的列表。任何帮助都将不胜感激

这是我的密码：

<div class="wrapper boxes">
  <div class="container">
    <div class="box col-4-4">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="box col-1-2">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="box col-2-1">xxx</div>
    <div class="box col-4-4">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="box col-1-1">xxx</div>
    <div class="clear"></div>
  </div>
</div>

---

这可能不是最有用的答案，但我建议您使用massy.js并以简单的方式完成。谢谢，我会调查的。。希望有人可以帮助CSS，否则javascript就是！

.container{width:1170px}
.boxes{margin:40px 0 30px}
.boxes:after{content:"";display:table;clear:both}
.boxes [class*='col-']{float:left;background:#f9f}
.boxes .col-1-1{width:260px;height:160px}
.boxes .col-1-2{width:260px;height:330px}
.boxes .col-2-1{width:530px;height:160px}
.boxes .col-4-4{width:530px;height:330px}
.boxes [class*='col-']{margin-right:10px;margin-bottom:10px}